on

綁定事件處理程序

ele.onxxx = function(){}

如下添加一個點擊事件，使用onclick，程序中this指向事件對象本身

不能給同一個對象綁定相同的處理事件，后面的會把前面的覆蓋掉

解除事件處理程序

ele.onxxx = false/''/null;

解除綁定就是給onclick屬性重新賦值為false或者空串或者null

addEventListener

綁定事件處理程序

ele.addEventListener(type,fn,false);

其中的test也可以是匿名函數，但匿名函數不能解除綁定
程序中this指向事件對象本身
IE9及以上兼容

可以給一個對象綁定多個處理程序

解除事件處理程序

ele.removeEventListener(type,fn,false);

解除處理程序要用相同的處理對象，處理事件，處理函數

attachEvent

綁定事件處理程序

ele.attachEvent('on' + type,fn);

IE8及以下兼容
處理程序中this指向window
其中的test也可以是匿名函數，但匿名函數不能解除綁定

可以給一個對象綁定多個處理程序

解除事件處理程序

ele.detachEvent('on' + type,fn);

解除處理程序要用相同的處理對象，處理事件，處理函數

封裝兼容的事件處理方法

attachEvent方法中handle的this本來應該是window，這里改成了與其他方法一致的事件對象本身

function addEvent(element,type,handle){if(element.addEventListener){element.addEventListener(type,handle,false);}else if(element.attachEvent){element.attachEvent('on'+type,function(){handle.call(element);})}else{element['on'+type] = handle;} }

總結

以上是生活随笔為你收集整理的事件处理方式on、addEventListener和attachEvent的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。