本文實(shí)例講述了JS事件流與事件處理程序。分享給大家供大家參考，具體如下：
1.事件流：從頁(yè)面中接收事件的順序
1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕獲
1.3 DOM事件流 ：事件捕獲階段——事件目標(biāo)階段——事件冒泡階段
DOM2級(jí)事件規(guī)定 ：捕獲階段不會(huì)涉及目標(biāo)事件。
2.事件處理程序
事件 ：用戶或者瀏覽器自身執(zhí)行的 某種動(dòng)作
事件處理程序 ：響應(yīng)某個(gè)事件的 函數(shù) 。
2.1 HTML事件處理程序
用一個(gè)與該事件處理程序同名的HTML特性來(lái)指定。
2.1.1包含要執(zhí)行的具體動(dòng)作
<input type="button" value="Click me" onclick="alert('Clicked')"/>2.1.2 調(diào)用其他地方定義的腳本
<input type="button" value="Click me" onclick="showMessage()"/>
2.1.3 缺點(diǎn)
1.時(shí)差問(wèn)題：使用try-catch塊捕捉錯(cuò)誤。onclick="try { showMessage() ;} catch(ex) {} "
2.程序的作用域鏈在不同瀏覽器中會(huì)導(dǎo)致不同結(jié)果 3.HTML和JS代碼耦合緊密2.2 DOM0級(jí)事件處理程序
將一個(gè)函數(shù)賦值給一個(gè)事件處理程序?qū)傩裕纾簅nclick。
為事件處理程序賦值。
btn.onclick = function() { alert( this.id );};事件處理程序在元素的作用域中運(yùn)行，this指向當(dāng)前元素。
刪除事件處理程序：
btn.onclick = null;
2.3 DOM2級(jí)事件處理程序
addEventListener(處理的事件名，事件處理程序函數(shù)，布爾值)；
removeEventListener(處理的事件名，事件處理程序函數(shù)，布爾值)；
布爾值：捕獲階段調(diào)用事件處理程序：true。冒泡階段調(diào)用：false。大多數(shù)情況下用false。
btn.addEventListener("click" , function() { alert(this.id);}, false);好處：可以添加多個(gè)事件處理程序。事件按照添加先后順序執(zhí)行。
問(wèn)題：匿名函數(shù)無(wú)法移除。
最好寫成
var handler = function(){ alert(this.id);};btn.addEventListener("click", handler, false);btn.removeEventListener("click", handler, false);2.4 IE事件處理程序
attachEvent(事件處理程序名稱，事件處理程序函數(shù))；
detachEvent(事件處理程序名稱，事件處理程序函數(shù))；
通過(guò)該方法添加的事件處理程序，都會(huì)被添加到冒泡階段。
btn.attachEvent("onclick",function(){ alert("clicked");});注意：使用DOM級(jí)方法時(shí)，事件會(huì)在所屬元素的作用域內(nèi)運(yùn)行；使用attachEvent()方法，事件處理程序會(huì)在全局作用域運(yùn)行，this==window。
好處：可以添加多個(gè)事件處理程序。后添加先執(zhí)行。
新聞熱點(diǎn)
疑難解答
圖片精選
