前言

　　本文大概整理下綁定事件的幾種方式，兼容IE8- 的方式（如果需要的話），事件委托，阻止傳播，取消默認行為，event對象等。

　　之前做的多是手機端頁面，監聽事件也一直是?addEventListener ，現代瀏覽器基本都支持addEventListener?，除了萬惡的IE8及更低版本IE。雖說不用太管IE8了（個人愚見），但是還是有必要整理下之前兼容性的處理方式

HTML事件處理

　　在HTML標簽中直接給屬性設置處理程序。HTML中加入了JS代碼，因為需要行為、樣式、結構分離，這種方式現在已經淘汰，就不深入探究了。

1 <button onclick="alert('HTML事件處理！')">點我</button>

?

DOM0級事件處理

　　通過元素對象的事件屬性來綁定處理程序。先看栗子

<a href="http://www.baidu.com" class="a1">快點擊我！</a> document.querySelector('.a1').onclick = function(){ //綁定事件alert('DOM0綁定--a');}

　　先獲取到元素a，在給元素的點擊事件屬性onclick綁定處理程序。

　　這種方式的特點：

　　　　1、簡單易用，兼容性良好，基本所有瀏覽器都支持

　　　　2、只能綁定一個處理程序，重復綁定會覆蓋。如果給a的onclick屬性再綁定一個處理程序，那么現在的這個就會被覆蓋掉

　　　　3、只會在冒泡階段觸發

　　取消綁定也非常簡單，直接設為null就可以了。

document.querySelector('.a1').onclick = null; //取消綁定

?

DOM2級事件處理

　　通過事件方法來綁定和解綁處理程序。同樣看個栗子

<a href="http://www.baidu.com" class="a2">點擊我！</a> document.querySelector('.a2').addEventListener('click', function(e){ //綁定事件1alert('DOM2綁定--a2 -- 1')}, false)document.querySelector('.a2').addEventListener('click', function(e){ //綁定事件2alert('DOM2綁定--a2 -- 2')}, false)

　　addEventListener(eventName,listener,useCapture) 方式可以為事件綁定處理程序，第一個參數為事件類型（不帶on）；第二個參數是處理程序；第三個參數可指定哪個階段觸發，false對應冒泡階段、true對象捕獲階段（默認false），部分低版本瀏覽器要求這個參數不能為空，所以最好還是帶上。

　　這種方式的特點：

　　　　1、可為同一個事件綁定多個處理程序，會依次觸發。多次綁定同一個處理程序，只會生效一次

　　　　2、可指定觸發的階段，捕獲階段或者冒泡階段

　　　　3、兼容IE8 - 之外的其他瀏覽器

　　解綁的方式為：Element.removeEventListener(eventName,listener,useCapture);和綁定的用法一致

　　

　　IE8- 有一套自己的事件處理方法

　　　　綁定：Element.attachEvent(eventNameWithOn,listener)

　　　　解綁：Element.detachEvent(eventNameWithOn,listener)

document.querySelector('.a2').attachEvent('onclick', function(e){alert('DOM2綁定--a2 -- 2')})

　　特點：

　　　1、事件類型帶on (eg：onclick)

　　　2、只能在冒泡階段觸發

　　　3、IE10 - IE5都支持該方法

兼容性處理方式

　　兩種方式的差別在事件類型和第三個參數，所以可以做一些處理，封裝兼容性處理的方式

//通用方式//綁定function addEvent(targetElement,eventName,listener,useCapture){if(targetElement.addEventListener){ targetElement.addEventListener(eventName,listener,useCapture);}else if(targetElement.attachEvent){targetElement.attachEvent('on' eventName,listener);}else {targetElement['on' eventName] = listener;}}//解綁function removeEvent(targetElement,eventName,listener,useCapture){if(targetElement.addEventListener){targetElement.removeEventListener(eventName,listener,useCapture);}else if(targetElement.attachEvent){targetElement.detachEvent('on' eventName,listener);}else {targetElement['on' eventName] = null;}}

　　測試一下使用，在IE8及其他瀏覽器都可以正常使用。

addEvent(document.querySelector('.a2'),'click',test,false)function test(e){alert('addEvent then removeEvent!');removeEvent(document.querySelector('.a2'),'click',test,false); //取消綁定}

?

Event對象

　　不同的方式獲取event對象的方式也不同

　　　　attachEvent綁定： 通過 window.event獲取event對象

　　　　其他方式（DOM0和addEventListener）：處理函數傳參直接獲取

function test(e){ //兼容性的方式e = e || window.event; //event對象}

　　attachEvent綁定的方式，處理程序內部this指向window。想要獲取元素對象 可以通過 window.event.srcElement

　　其他方式的this指向觸發元素 。 同樣的也可以通過 event.target獲取

e = e || window.event; //event對象var target = e.target || e.srcElement; //觸發對象

?

阻止傳播和取消默認行為

　　通過event對象的方式取消默認行為：

　　　　event.preventDefault() ? ?//其他瀏覽器

　　　　event.returnValue = false //IE8-

　　DOM0級綁定的 還可以直接 return false 來取消默認行為，所有瀏覽器都支持

?

　　event對象阻止傳播：

　　　　event.stopPropagation() //其他瀏覽器

　　　　event.cancelBubble = true //IE8 -

　　一般可以這樣寫

e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; //阻止傳播e.preventDefault ? e.preventDefault() : e.returnValue = false; //取消默認行為

?

事件委托

　　如果多個元素的處理程序類同，如果每個都綁定一次會很繁瑣和低效，這時可以利用冒泡的原理（他們都會冒泡到父元素）直接在父元素上綁定事件。即為事件委托

<section class="item item-3"><button class="btn1">點擊我1！</button><button class="btn1">點擊我2！</button><button class="btn1">點擊我3！</button></section>

　　

addEvent(document.querySelector('.item-3'),'click',function(e){e = e || window.event; //event對象var target = e.target || e.srcElement; //觸發對象if(target.nodeName === 'BUTTON'){alert(target.innerText);}})

　　本例中，想要實現點擊按鈕輸出按鈕文字。如果給三個按鈕分別綁定事件會不會太傻。所以直接綁定了父元素，事件觸發時，判斷觸發對象是否是button標簽，如果是，則輸出文字。

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

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

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