封装常用的跨浏览器的事件对象EventUtil
var EventUtil = {
addHandler: function(element,type,handler) { //事件监听
if(element.addEventListener) {
element.addEventListener(type,handler,false);
}else if(element.attachEvent) {
element.attachEvent("on"+type,handler);
}else {
element["on" +type] = handler;
}
},
removeHandler: function(element,type,handler){ //移除事件监听
if(element.removeEventListener) {
element.removeEventListener(type,handler,false);
}else if(element.detachEvent) {
element.detachEvent("on"+type,handler);
}else {
element["on" +type] = null;
}
},
getEvent: function(event) {//获取event对象,返回event对象的引用
return event ? event : window.event;
},
getTarget: function(event) {//返回事件目标。
return event.target || event.srcElement;
},
preventDefault: function(event){//取消或者阻止事件默认行为
if(event.preventDefault) {
event.preventDefault();
}else {
event.returnValue = false;
}
},
stopPropagation: function(event) {//阻止事件流,阻止事件冒泡
if(event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
},
getRelatedTarget: function(event){//返回相关元素信息(仅对于mouseover和mouseout事件)
if (event.relatedTarget){
return event.relatedTarget;
} else if (event.toElement){
return event.toElement;
} else if (event.fromElement){
return event.fromElement;
} else {
return null;
}
},
getWheelDelta: function(event) {//获取鼠标滚轮增量值,检测是否包含WheelDelta
if(event.wheelDelta) {
return event.wheelDelta;
}else {
return -event.detail * 40
}
},
getCharCode: function(event) {//获取键盘按键键码。
if(typeof event.charCode == 'number') {
return event.charCode;
}else {
return event.keyCode;
}
},
getButton:function(event){//在mouseup或者mousedown的时候,event存在一个button属性,用于判断是按了鼠标左键,右键,还是中键,0鼠标主键按钮,1是中间,2是次键(右键)
if(document.implementation.hasFeature("MouseEvents","2.0")){
return event.button;
}else{
switch(event.button){
case 0:
case 1:
case 3:
case 5:
case 7:
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}
};
封装常用的跨浏览器的事件对象EventUtil的更多相关文章
- 跨浏览器的事件对象-------EventUtil 中的方法及用法
什么是EventUti----封装好的事件对象 在JavaScript中,DOM0级.DOM2级与旧版本IE(8-)为对象添加事件的方法不同 为了以跨浏览器的方式处理事件,需要编写一段“通用代码”,即 ...
- 跨浏览器的事件对象EventUtil
var EventUtil = function(){ /*--addHandler--*/ addHandler:function(element,type,handler){ if(element ...
- js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象
事件对象 在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...
- Javascript跨浏览器的事件对象
一.跨浏览器的事件对象 var EventUtil = { ///添加事件 addHandler: function (element, type, handler) { if (element.ad ...
- EventUtil——跨浏览器的事件对象
. 首页 博客园 联系我 前言:什么是EventUtil?. EventUtil对象全见. addHandler方法. removeHandler方法. event对象与getEvent方法. tar ...
- javaScript之跨浏览器的事件对象
跨浏览器的兼容代码 var eventHandler = { addHandler: function(element, type, handler){}, removeHandler: functi ...
- js实现一些跨浏览器的事件方法
用JavaScript实现事件的绑定,移除,以及一些常用的事件属性的获取,时常要考虑到在不同浏览器下的兼容性,下面给出了一个跨浏览器的事件对象: var EventUtil = { on: funct ...
- JavaScript跨浏览器绑定事件函数的优化
JavaScript作为一门基于事件驱动的语言(特别是用在DOM操作的时候),我们常常需要为DOM绑定各种各样的事件.然而,由于低版本的IE的不给力,在绑定事件和移除事件监听上都与众不同,我们常常需要 ...
- js 跨浏览器实现事件
我们知道不同的浏览器实现事件是不同的,就比如说我们常见的有三种方法: 1,dom0处理事件的方法,以前的js处理事件都是这样写的. (function () { var p=document.getE ...
随机推荐
- typescript多维对象数组仿List泛型
定义对象: namespace entity{ export class MyClass{ public value:number; public rect:string; public constr ...
- 1:C#的三种异步的详细介绍及实现
一.介绍异步的前世今生: 异步编程模型 (APM,Asynchronous Programming Model) 模式(也称 IAsyncResult 模式),在此模式中异步操作需要 Begin 和 ...
- tomcat异常 Socket bind failed: [730048]
tomcat从官网站点下载时须注意版本信息: zip格式为window压缩版. tar.gz为linux安装板. installer为window安装板. 解压后的各文件功能与作用: bin:用于放置 ...
- jquery call cross-domain webapi owin self-host
<!DOCTYPE HTML> <html LANG="cn"> <head> <meta name="viewport&quo ...
- ocp题库更新,052最新考试题及答案整理-31
31.Which two events always request the LGWR to write? A) when LGWR is notified by a server process t ...
- redis在Linux上的部署和jedis简单使用
一.redis的安装 这里演示的版本是Redis4.0.6,Linux系统是CentOS6.7,Jdk1.7,Jedis2.8.1 这是官方文档介绍的安装方式 下载,解压,编译: $ wget htt ...
- dos 下脚本编写须知
主题为:doc脚本运行结束后,不自动退出终端. 方法1假设你的bat名字叫rabbit.bat你可以新开一个bat,内容是start rabbit.bat然后这个新的bat是不会自动关闭的 注意,这个 ...
- php 的加法
无意间看到了php中关于加,减,乘,除 的计算方法 这里 http://lxr.php.net/source/xref/PHP-5.6/Zend/zend_operators.h#596 static ...
- opencv学习笔记(七)---图像金字塔
图像金字塔指的是同一图像不同分辨率的子图的集合,有向下取样金字塔,向上取样金字塔,拉普拉斯金字塔....它是图像多尺度表达的一种,最主要的是用于图像的分割 向下取样金字塔指高分辨率图像向低分辨率图像的 ...
- 使用bootstrap-table等自动使用ajax地址载入数据的插件的数据设计建议
提出问题: bootstrap-table 可以根据ajax地址load的json数据.这个json数据一般就是数据库中查询的结果,而数据库中存放的数据一般不是用户友好的,比如数据表示一般使用简洁id ...