前言 本文大概整理下綁定事件的幾種方式，相容IE8- 的方式（如果需要的話），事件委托，阻止傳播，取消預設行為，event對象等。 之前做的多是手機端頁面，監聽事件也一直是 addEventListener ，現代瀏覽器基本都支持addEventListener ，除了萬惡的IE8及更低版本IE。雖 ...
前言
本文大概整理下綁定事件的幾種方式，相容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){ //綁定事件1
alert('DOM2綁定--a2 -- 1')
}, false)
document.querySelector('.a2').addEventListener('click', function(e){ //綁定事件2
alert('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標簽，如果是，則輸出文字。
