一、事件处理程序。
1、DOM0级事件处理程序。
形如 element.onclick = function(){};
程序的作用域为元素的作用域。
移除监听, element.onclick = null;
2、DOM2级事件处理程序。
形如 element.addEventListener("click",function(){},false);
程序的作用域为元素的作用域。
第一个参数为事件类型,第二个参数为事件处理程序,第三个参数为true时表示在捕获阶段调用事件处理程序,为false为冒泡阶段。一般为false。
能够一次添加多个事件处理程序。
为了能够移除事件处理程序,第二个参数最好不要使用匿名程序。
移除监听,element.removeElementListener("click",handler,false);
3、IE事件处理程序。
IE的事件处理程序跟DOM0和DOM2级事件处理程序有几个比较明显的区别。
形如 element.attachEvent("onclick",handler);
程序作用域为全局作用域。
也可添加多个事件处理程序,触发的顺序与添加顺序相反。
移除监听,element.detachEvent("onclick",handler); 移除规则与DOM2级类似。
二、事件对象。
1、DOM中的事件对象。
function(event){
var evt = event;
}
事件的目标 event.target;
事件的类型 event.type;
事件冒泡处理:
当event.bubbles = true 时可以调用 event.stoppropagation() 阻止冒泡,也可以阻止事件捕获。
默认事件处理:
当event.cancelable = true 时可以调用 event.preventDefault() 阻止默认事件
2、IE中的事件对象。
在使用DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。即:
function(){
var evt = window.event;
}
如果是使用IE方法添加事件处理程序,也会有一个event作为参数传入事件处理程序中。但是也可以使用window来访问event对象。
事件的目标 event.srcElement;
事件的类型 event.type;
事件冒泡处理:
event.cancelBubble = true; IE不支持事件捕获,所以也就没有阻止事件捕获的说法了。
默认事件处理:
event.returnVaule = false;
三、跨浏览器事件处理事件。
综上所述,可以写出一个比较好用的跨浏览器事件处理事件对象。
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;
}
},
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;
}
},
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;
}
},
stopPropagation: function(event){
if(event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
}
};