簡介
在編寫網(wǎng)頁過程中，我們需要給頁面上的元素添加事件（綁定事件）。在 原生JS 中，綁定事件有兩種處理方式：DOM0級、DOM2級。DOM0級處理方式就是通過on綁定事件，DOM2級處理方式就是通過addEventListener()，但是DOM2級有兼容性問題，IE8及其以前的版本使用attachEvent()進行綁定事件。下面我們將詳細介紹。
<!--HTML語句-->
<div id="parent">
<div id="child"></div>
</div>
以下案例將采用上面這個HTML結(jié)構(gòu)進行講解，事件采用點擊事件。在講解三個綁定事件方法之前，有必要先了解什么是事件捕獲和冒泡。
事件捕獲和事件冒泡
事件捕獲執(zhí)行過程：
從最不具體的元素（最外面的那個盒子）開始向里面捕獲，拿我們上面的案例講它的順序是：parent->child，說白了就是由外向內(nèi)
事件冒泡執(zhí)行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡，拿我們上面的案例講它的順序是：child->parent，說白了就是由內(nèi)向外
只有將事件捕獲和事件冒泡弄清楚了之后才能進行詳細講解不同綁定事件的方法。
on詳細說明
通過on的方式綁定事件是DOM0級處理方式。
eg：
//原生JS
//ele.on+type = fun;
//ele是指DOM元素；type是指事件類型；fun是要執(zhí)行的函數(shù)
document.getElementById('parent').onclick = function () {
console.log('1')
}
document.getElementById('child').onclick = function () {
console.log('2')
}
通過on進行事件綁定默認事件冒泡。
注意：
document.getElementById('parent').onclick = function () {
console.log('1')
};
document.getElementById('parent').onclick = function () {
console.log('2')
};
這段代碼的運行結(jié)果是打印2，這說名了對同一元素綁定同一事件會進行覆蓋。
addEventListener()詳細說明
通過addEventListener()進行事件綁定是DOM2級處理方式。這個方法只針對主流瀏覽器，我想非主流瀏覽器不需要我介紹了吧（IE8及其以前的版本）！
eg：
//原生JS
//ele.addEventListener(type , fun , [boolean])
//ele是指DOM元素；fun是指運行的函數(shù)；第三個參數(shù)可有可無，是指事件執(zhí)行的順序，如果是true，則按照事件捕獲執(zhí)行；如果是false，則是按照事件冒泡執(zhí)行;第三個參數(shù)如果不寫，則是默認false即事件冒泡
document.getElementById('parent').addEventListener('click' , function () {
console.log('1')
});
document.getElementById('child').addEventListener('click' , function () {
console.log('2')
});
通過這個方式對同一元素綁定同一事件是不會發(fā)生覆蓋的情況，每個事件依次執(zhí)行
document.getElementById('parent').addEventListener('click' , function () {
console.log('1')
});
document.getElementById('parent').addEventListener('click' , function () {
console.log('2')
});
執(zhí)行結(jié)果是先打印1，在打印2。
attachEvent()詳細說明
attachEvent()這個方法只針對那些讓人頭疼他的非主流瀏覽器（IE8及其以前的版本）。屬于DOM2級處理方式。
//原生JS
//ele.atachEvent('on'+type , fun)
//ele是指DOM元素；
//第一個參數(shù)是個由on開頭的字符串，指定綁定什么類型的事件;第二個參數(shù)是執(zhí)行的函數(shù)
//該方法只有兩個參數(shù)
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('1')
});
document.getElementById('child').attachEvent('onclick' , function () {
console.log('2')
});
默認執(zhí)行事件冒泡。
通過這個方式對同一元素綁定同一事件是不會發(fā)生覆蓋的情況，每個事件倒序執(zhí)行，即先綁定的事件后執(zhí)行，后綁定的事件先執(zhí)行
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('1')
});
document.getElementById('parent').attachEvent('onclick' , function () {
console.log('2')
});
執(zhí)行結(jié)果是先打印2，在打印1。
使用注意點
- DOM0級處理方式（on）沒有兼容性問題，但是會發(fā)生覆蓋的情況；
- DOM2級處理方式有兼容性問題，不會發(fā)生覆蓋的情況；
- 注意addEventListener()和attachEvent()兩個方法的第一個參數(shù)的區(qū)別：addEventListener()是一個不帶on的字符串，就是個事件類型；attachEvent()是一個帶on的字符串。
