事件處理程序也叫事件偵聽器,什么是事件處理程序奕枢？那首先夭问，什么是事件信轿？事件就是用戶或者瀏覽器自身執(zhí)行的某種動(dòng)作晃痴，如：click、load等都是事件的名字财忽。而響應(yīng)時(shí)間的函數(shù)就叫做事件處理程序倘核，如：onclick，onload
添加事件處理程序的方法
為元素添加事件處理程序有多種方法：
一即彪、在元素上添加笤虫，如：
<input type="button" value="clickMe" onclick="alert(value)"/> //這里用的是value而不是this.value,當(dāng)然用this.value也是可以的，this指的是目標(biāo)元素本身
這種方法的優(yōu)點(diǎn)在于他拓展作用域的方式，在函數(shù)內(nèi)部可以直接訪問document以及元素本身的屬性琼蚯。如下代碼酬凳，點(diǎn)擊按鈕會(huì)彈出輸入框中的值：
<form>
<input type="text" name="userName"/>
<input type="button" value="userName's value" onclick="alert(userName.value)"/>
</form>
缺點(diǎn)在于：
1、會(huì)有時(shí)差問題遭庶，因?yàn)楹芏鄷r(shí)候偵聽器要處理的并不是簡單的一個(gè)語句宁仔，而是一個(gè)功能，如果點(diǎn)擊時(shí)頁面還沒有加載完成點(diǎn)擊時(shí)要執(zhí)行的函數(shù)峦睡，那么就會(huì)報(bào)錯(cuò)翎苫。這樣我們可以把他鄧莊到一個(gè)try-catch塊中來捕捉錯(cuò)誤，如：
<input type="button" value="userName's value" onclick="try{sth();}catch(ex){}"/>
2榨了、可能會(huì)有兼容問題
3煎谍、html與javascript緊密耦合，不利于維護(hù)龙屉。
二呐粘、為元素指定事件處理程序：
<form>
<input type="text" name="userName" id="userName"/>
<input type="button" value="clickMe" id="button" />
</form>
var btn = document.getElementById("button");
var userName = document.getElementById("userName");
btn.onclick = function(){
alert(userName.value); //userName's value 這時(shí)要想獲取userName的value必須取得userName的引用
alert(this.value); //這里的this指的是當(dāng)前點(diǎn)擊的元素
}
btn.onclick = function(){ //如果為btn綁定多次click事件的話只識(shí)別最后一次
alert(1);
}
//btn.onclick = null //取消注釋之后將刪除btn的click事件，即點(diǎn)擊btn將不再有任何反應(yīng)
這種方法的優(yōu)點(diǎn)在于1转捕、綁定簡單2作岖、不會(huì)有瀏覽器兼容問題
缺點(diǎn)在于當(dāng)需要操作的元素很多時(shí)，對(duì)DOM的操作太多五芝，函數(shù)太多會(huì)占用內(nèi)存痘儡，影響網(wǎng)站的性能
三、addEventListener()：
addEvenetListener()接受三個(gè)參數(shù)：1枢步、事件名沉删，如click注意不是onclick 2、執(zhí)行函數(shù) 3醉途、true or false(true表示在事件捕獲階段調(diào)用丑念，false表示在事件冒泡階段調(diào)用)。特別說明：不建議在事件捕獲階段調(diào)用结蟋，也就是不建議使用true,除非特別需要脯倚，因?yàn)闀?huì)有兼容問題
<input type="button" value="clickMe" id="button" />
var btn = document.getElementById("button");
btn.addEventListener('click',function(e){
var target = e.target || e.srcElement;
console.log(target);
},false);
btn.addEventListener('click',sth,false); //用addEventListener()指定事件時(shí)可以指定多次
//btn.removeEventListener('click',sth,false);//removeEventListener()傳入相同的參數(shù)可以解除綁定，注意：匿名函數(shù)是無法解綁的
