一般来说,可以直接封装成这种形式:
var addEvent = function(element,type,handler){
if(element.addEventListener){ //DOM2级
element.addEventListener(type,handler,false); //false为冒泡,true为捕获
}else if(element.attachEvent){ //IE
element.attachEvent("on"+type,function(){ //默认皆为冒泡
handler.call(element);
});
}else{
element["on"+type] = handler; //DOM0级
}
};
addEventListener的使用方式:主要是DOM2级
target.addEventListener(type, listener, useCapture);
target就是要注册事件的对象
type就是事件类型 比如“click"
listener就是监听的函数
useCapture就是是否使用捕获方式,false为冒泡,true为捕获
attachEvent使用方式:主要是IE中使用
target.attachEvent(type, listener);
type是事件类型,注意是这种形式:”onclick"
listener监听的函数
默认使用冒泡的方式
相应的,解除事件的方法:
removeEventListener(event,function,useCapture);
detachEvent(event,function);
那它们有什么不同呢?
举个例子:
document.getElementByIdx("btn").onclick = method1;
document.getElementByIdx("btn").onclick = method2;
document.getElementByIdx("btn").onclick = method3;
// 如果这样写,那么将会只有medhot3被执行
// 写成这样:
var btn1Obj = document.getElementByIdx("btn1"); //object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
// 执行顺序为 method3->method2->method1
// 如果是Mozilla系列,并不支持该方法,需要用到addEventListener var btn1Obj = document.getElementByIdx("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
// 执行顺序为 method1->method2->method3