簡介
在編寫網(wǎng)頁過程中，我們需要給頁面上的元素添加事件（綁定事件）站粟。在 原生JS 中黍图，綁定事件有兩種處理方式：DOM0級、DOM2級奴烙。DOM0級處理方式就是通過on綁定事件助被，DOM2級處理方式就是通過addEventListener()，但是DOM2級有兼容性問題切诀，IE8及其以前的版本使用attachEvent()進行綁定事件揩环。下面我們將詳細介紹。
<!--HTML語句-->
<div id="parent">
<div id="child"></div>
</div>
以下案例將采用上面這個HTML結構進行講解幅虑，事件采用點擊事件丰滑。在講解三個綁定事件方法之前，有必要先了解什么是事件捕獲和冒泡倒庵。
事件捕獲和事件冒泡
事件捕獲執(zhí)行過程：
從最不具體的元素（最外面的那個盒子）開始向里面捕獲褒墨，拿我們上面的案例講它的順序是：parent->child，說白了就是由外向內
事件冒泡執(zhí)行過程：
從最具體的的元素（你單擊的那個元素）開始向上開始冒泡擎宝，拿我們上面的案例講它的順序是：child->parent郁妈，說白了就是由內向外
只有將事件捕獲和事件冒泡弄清楚了之后才能進行詳細講解不同綁定事件的方法。
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')
};
這段代碼的運行結果是打印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í)行結果是先打印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í)行結果是先打印2逞怨，在打印1者疤。
使用注意點
- DOM0級處理方式（on）沒有兼容性問題，但是會發(fā)生覆蓋的情況叠赦；
- DOM2級處理方式有兼容性問題驹马，不會發(fā)生覆蓋的情況；
- 注意addEventListener()和attachEvent()兩個方法的第一個參數(shù)的區(qū)別：addEventListener()是一個不帶on的字符串除秀，就是個事件類型窥翩；attachEvent()是一個帶on的字符串。
