1. HTML事件處理程序
<input type="checkbox" class="check" onclick="console.log(1)">
缺點(diǎn)
- 時(shí)差問題
- 用戶可能會(huì)在HTML元素一出現(xiàn)在頁(yè)面上就觸發(fā)響應(yīng)的事件呵恢，但當(dāng)時(shí)的事件處理程序有可能尚不具備執(zhí)行條件孵睬，就會(huì)引發(fā)錯(cuò)誤
- 擴(kuò)展事件處理程序的作用域鏈在不同瀏覽器中會(huì)導(dǎo)致不同結(jié)果鸡典，不同JavaScript引擎遵循的標(biāo)識(shí)符解析規(guī)則略有差異，很可能會(huì)在訪問非限定對(duì)象成員時(shí)出錯(cuò)
- HTML與JavaScript代碼緊密耦合
2. DOM0事件處理程序
// 綁定事件
txt[0].onchange = function () {
console.log(2);
}
// 解綁事件
txt[0].onchange = null;
優(yōu)勢(shì)
- 簡(jiǎn)單
- 具有跨瀏覽器的優(yōu)勢(shì)
小缺陷
- 只能綁定一次事件處理程序
3. DOM2級(jí)事件
前言：DOM2級(jí)事件定義了兩個(gè)方法，用于處理綁定和刪除事件處理程序的操作
綁定事件
element.addEventListener(要處理的事件名, 作為處理程序的函數(shù), 是否在捕獲階段調(diào)用事件處理程序)
要處理的事件名
'click'
處理程序的函數(shù)
function () {}
是否在捕獲階段調(diào)用事件處理程序
true: 在捕獲階段調(diào)用事件處理程序
false: 在冒泡階段調(diào)用事件處理程序
可以多次綁定不同的事件處理程序顾瞪，并且會(huì)按照它們的綁定順序執(zhí)行
解綁事件
通過(guò)上面方式綁定的事件只能使用removeEventListener()來(lái)移除
移除的時(shí)候傳入的參數(shù)與綁定處理程序的時(shí)使用的參數(shù)需要相同，那么問題來(lái)了抛蚁，你的處理程序函數(shù)是匿名函數(shù)將無(wú)法移除
也就是說(shuō)最好 處理程序函數(shù)使用有名函數(shù)
ele.addEventListener('click', hander, false)
ele.removeEventListener('click', hander, false)
4. IE事件
IE實(shí)現(xiàn)了與DOM中類似的兩個(gè)方法：
attachEvent() 和 detachEvent()
綁定事件
ele.attachEvent(事件名, 事件處理程序函數(shù))事件名
'onclick'
事件處理程序函數(shù)
function () {}
IE只支持事件冒泡
attachEvent()與使用DOM0級(jí)方法的主要區(qū)別陈醒，在于事件處理程序的作用域
在使用DOM0級(jí)方法的情況下，事件處理程序會(huì)在其所屬元素的作用域內(nèi)運(yùn)行
在使用attachEvent()方法情況下瞧甩，事件處理程序會(huì)在全局作用域中運(yùn)行钉跷，因此this等于window
attachEvent()也可以綁定多個(gè)事件處理程序函數(shù)
但是它的執(zhí)行順序與addEventListener的執(zhí)行順序相反
解綁事件
ele.detachEvent(事件名, 事件處理程序函數(shù))
條件必須提供相同的參數(shù)
事件處理程序函數(shù)也必須是有名函數(shù)
