資訊專欄INFORMATION COLUMN
摘要：通過(guò)偵聽器來(lái)預(yù)定事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。另外級(jí)事件和事件對(duì)事件的執(zhí)行順序是不一樣的，是按照事件的添加順序來(lái)觸發(fā)處理程序，而則是先觸發(fā)后添加的事件偵聽器，即與相反。
JS與HTML的交互是通過(guò)事件來(lái)實(shí)現(xiàn)的。通過(guò)偵聽器來(lái)預(yù)定事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。這些偵聽器用于為事件處理程序?qū)傩再x值處理函數(shù)、可以是addEventListener，也可以是attachEvent，后邊將詳細(xì)講述。
事件流首先需要了解一下事件流，所謂事件流就是頁(yè)面接收事件的順序。DOM2規(guī)定了事件流有三個(gè)階段，捕獲階段、處于目標(biāo)極端和事件冒泡階段。也就是說(shuō)較為不具體的節(jié)點(diǎn)先收到事件（例如document），一層一層往下傳播事件，直到到達(dá)目標(biāo)元素。我們可以根據(jù)需要在捕獲階段攔截事件，但是一般情況下我們依舊在冒泡階段處理事件。需要注意的是IE的事件冒泡是說(shuō)事件從目標(biāo)元素開始一層一層網(wǎng)上傳播事件，直到遇到document。
事件處理程序接收到了事件，我們要對(duì)它做出相應(yīng)的處理，這就用到了事件處理程序，其實(shí)就是一個(gè)函數(shù)。
事件處理程序可以是直接以標(biāo)簽onclick屬性值存在的一段代碼，我們稱之為HTML事件處理程序，這種事件處理程序在執(zhí)行的時(shí)候會(huì)擴(kuò)大作用域，可以訪問(wèn)document和自身的成員，如果目標(biāo)元素是表單，還能訪問(wèn)父元素form中的其他元素。其擴(kuò)展作用域方法為：
function(){
with(document){
with(this){
//元素屬性
}
}
}
DOM先后提出了DOM0和DOM2級(jí)的事件處理程序，DOM0級(jí)是通過(guò)JavaScript指定事件處理程序的傳統(tǒng)方式，即給事件處理程序?qū)傩再x值函數(shù)。DOM0級(jí)的事件處理程序被認(rèn)為是元素的方法，因而在元素的作用域中執(zhí)行。
var btn = document.getElementById(“myBtn”);
btn.onclick = function(){
alert(this.id); //myBtn
}
DOM2級(jí)的事件處理程序指定了兩個(gè)方法：addEventListener和removeEventListener，他們接收3個(gè)參數(shù)，分別是事件名、作為事件處理程序的函數(shù)，一個(gè)布爾值，這個(gè)布爾值為true時(shí)指定了在捕獲事件階段調(diào)用事件處理程序，一般情況下為false，即在事件冒泡階段調(diào)用事件處理程序。
前邊說(shuō)到了IE的事件流是事件冒泡，那么第三個(gè)參數(shù)就不需要了，在IE事件處理程序中指定了類似的兩個(gè)方法：attachEvent和detachEvent。DOM2級(jí)事件和IE事件都可以為目標(biāo)元素添加多個(gè)事件處理程序，而DOM0級(jí)則只能指定一個(gè)事件處理程序。另外DOM2級(jí)事件和IE事件對(duì)事件的執(zhí)行順序是不一樣的，DOM2是按照事件的添加順序來(lái)觸發(fā)處理程序，而IE則是先觸發(fā)后添加的事件偵聽器，即與DOM2相反。
另外值得提一下的是IE的attachEvent與DOM0、DOM2級(jí)方法的事件處理程序的作用域不一樣，前者會(huì)在全局作用域中執(zhí)行，而后者在當(dāng)前元素的作用域內(nèi)執(zhí)行。
var btn = document.getElementById(“myBtn”);
var handle = function(){
alert(this === window); //true
}
btn.attachEvent(“onclick”, handle );
因而在自己編寫跨瀏覽器的事件處理程序時(shí)要注意一下IE的作用域的問(wèn)題，以及DOM0只能支持一個(gè)時(shí)間處理程序。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100008.html
摘要：希望幫助更多的前端愛(ài)好者學(xué)習(xí)。前端開發(fā)者指南作者科迪林黎，由前端大師傾情贊助。翻譯最佳實(shí)踐譯者張捷滬江前端開發(fā)工程師當(dāng)你問(wèn)起有關(guān)與時(shí)，老司機(jī)們首先就會(huì)告訴你其實(shí)是個(gè)沒(méi)有網(wǎng)絡(luò)請(qǐng)求功能的庫(kù)。 前端基礎(chǔ)面試題(JS部分) 前端基礎(chǔ)面試題(JS部分) 學(xué)習(xí) React.js 比你想象的要簡(jiǎn)單 原文地址：Learning React.js is easier than you think 原文作...
摘要：個(gè)人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現(xiàn)在已經(jīng)一年的時(shí)間了，由于工作比較忙，更新緩慢，后面還是會(huì)繼更新，現(xiàn)將已經(jīng)寫好的文章整理一個(gè)目錄，方便更多的小伙伴去學(xué)習(xí)。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個(gè)人前端文章整理 從最開始萌生寫文章的想法，到著手...
摘要：模塊化是隨著前端技術(shù)的發(fā)展，前端代碼爆炸式增長(zhǎng)后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調(diào)也不等同于異步。將會(huì)討論安全的類型檢測(cè)惰性載入函數(shù)凍結(jié)對(duì)象定時(shí)器等話題。 Vue.js 前后端同構(gòu)方案之準(zhǔn)備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當(dāng)初的 React，本人對(duì)寫代碼有潔癖，代碼也是藝術(shù)。此篇是準(zhǔn)備篇，工欲善其事，必先利其器。我們先在代...
摘要：事件事件在用戶退出頁(yè)面時(shí)發(fā)生。注意事件同樣觸發(fā)了頁(yè)面載入事件事件。如圖所示大體一句話描述和支持事件但是或者不支持該事件。瀏覽器兼容情況完美支持不支持文字提醒信息不支持如圖所示使用遇到的凡是標(biāo)簽都會(huì)觸發(fā)事件包括這種。 簡(jiǎn)介 onunload，onbeforeunload都是在刷新或關(guān)閉時(shí)調(diào)用，可以在腳本中通過(guò) window.onunload來(lái)調(diào)用。區(qū)別在于onbeforeunload在o...
閱讀 2045·2023-04-26 01:33
閱讀 1671·2023-04-26 00:52
閱讀 1055·2021-11-18 13:14
閱讀 5476·2021-09-26 10:18
閱讀 2922·2021-09-22 15:52
閱讀 1502·2019-08-29 17:15
閱讀 3031·2019-08-29 16:11
閱讀 1049·2019-08-29 16:11
