DOM2级事件处理程序:
DOM2级事件处理程序定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventLisener()。
它们都接受三个参数:要处理的事件名、作为事件处理程序的函数和一个布尔值。布尔值参数如果是true,表示在捕获阶段调用事件处理程序;如果是false,表示在冒泡阶段调用事件处理程序。
IE事件处理程序
IE实现了DOM中类似的两个方法:attachEvent()和detachEvent()。
这两个方法接受相同的两个参数:事件处理程序名称与事件处理程序函数。由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。
getEvent:
event || window.event
1.DOM
兼容DOM的浏览器会将一个event对象传入到事件处理程序中。
2.IE
在使用DOM0级方法添加事件处理程序时,event对象最为window对象的一个属性存在,用window.event取得evnet对象。
如果事件处理程序是用attachEvent()添加的,那么就会有一个event对象作为参数被传入程序函数中。
如果是通过HTML特性指定的事件处理程序,那么还可以通过一个名叫event的变量来访问event对象。
getTarget:
event.target || event.srcElement
1.DOM
target包含事件的实际目标。
2.IE
因为事件处理程序的作用域是根据指定它的方式来确定的,所以this不一定会始终等于事件目标。因而,最好还是使用event.srcElement比较保险。
preventDefault:
1.DOM
preventDefault()取消事件的默认行为
2.IE
returnValue属性相当于DOM中的preventDefault()方法,他们的作用都是取消给定事件的默认行为。只要将returnValue设置为false,就可以阻止默认行为。
stopProgagation:
1.DOM
stopProgagation()取消事件的进一步捕获或冒泡
2.IE
cancelBubble属性与DOM中的stopPropagation()方法作用相同,都是用来停止事件冒泡的。
getRelatedTarget
mouseover:事件的主目标是获得光标的元素,而相关元素是失去光标的元素。
mouserout:事件的主目标是失去光标的元素,而相关元素是获得光标的元素。
1.DOM
DOM通过event对象的relateTarget属性提供了相关元素的信息
2.IE
IE8及之前的版本不支持getRelatedTarget属性。
但在mouseover事件触发时,IE的fromElement属性中保存了相关元素
在mouseout事件触发时,IE的toElement属性中保存了相关元素。
getButton
对于mousedown和mouseup事件来说,在其event对象存在一个button属性,表示按下或释放的按钮。
1.DOM
DOM的button属性有3个,
0表示主鼠标键
1表示总监的鼠标按钮(鼠标滚轮按钮)
2表示次鼠标按钮
2.IE
IE8之前变笨也提供了button属性,但这个属性的值和DOM有很大的差异
0:表示没有按下按钮
1:表示按下了主鼠标按钮
2:表示按下了次鼠标按钮
3:表示同时按下了主、次鼠标按钮
4:表示按下了中间的鼠标按钮
5:表示同时按下了主鼠标按钮和中间的鼠标按钮
6:表示同时按下了次鼠标按钮和中间的鼠标按钮
7:表示同时按下了三个鼠标按钮
getCharCode
键码:
在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCII码中对应小写字母或数字的编码相同。
字符编码:
charCode属性只有在发生keypress事件时才包含值。
代码如下:
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){
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;
}
},
stopProgagation: function(event){
if(event.stopProgagation){
event.stopProgagation();
}else{
event.cancelBubble = true;
}
},
getRelatedTarget: function(event){
if(event.relatedTarget){
return event.relatedTarget;
}else if(event.toElement){
return event.toElement;
}else if(event.fromElement){
return event.fromElement;
}else{
return null;
}
},
getButton:function(event){
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;
}
}
},
getCharCode: function(event){
if(typeof event.charCode == "number"){
return event.charCode;
}else{
return event.keyCode;
}
}
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。