addEventListener和attachEvent以及element.onclick的区别

标签：

attachEvent是ie添加事件处理程序，接收两个参数，其中事件类型名称要加"on"，

可以添加多个事件处理程序，按照添加顺序相反的顺序触发;

addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”，

第二个是绑定的函数，第三个参数是一个布尔值，是事件的方式，意思是是否使用useCatch方式，

如果是false，就使用传统的冒泡方式，如果为true，就在捕获阶段调用事件处理程序。

addEventListener可以添加多个事件处理程序，按照添加顺序触发

二者有个本质上的区别，attachEvent的事件处理程序会在全局作用域中运行，this等于window对象，

而addEventLinstener添加的事件处理程序是在其依附的元素的作用域中运行的，this等于绑定元素对象。

既然他们的this指向不同，那怎么才能实现相同的this指向呢？

如果想要实现this关键字指向相同的话，要用Function的apply或者call方法。示例代码如下：

function bind(el, fn, type){
        var _fn = function(){
                fn.apply(el, arguments);
        };
        window.addEventListener ? el.addEventListener(type, _fn, false) : el.attachEvent("on" + type, _fn);
}

即用el来代替_fn里的this。（方法待测试）

el.onclick=function(event){
　　alert(event.type);           //"click"
};
el.addEventListener("click",function(event){
　　alert(el.type);               //"click"
},false);

<input type="button" value="Click me" onclick="alert(event.type)"/>   //"click"

el.onclick=function(){
　　var event=window.event;
　　alert(event.type);              //"click"
}

el.attachEvent("onclick",function(event){
　　alert(event.type);                 //"click"
});

addEventListener和attachEvent以及element.onclick的区别

标签：

原文地址：http://www.cnblogs.com/waisonlong/p/5257414.html