資訊專欄INFORMATION COLUMN
摘要：事件流級事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認(rèn)為是元素的方法。
事件流
事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。
事件冒泡即事件開始時(shí)由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)。如：
Click
當(dāng)點(diǎn)擊了頁面中的div元素，那么這個(gè)click事件會按照如下順序傳播：
div元素
body元素
html元素
document對象
事件捕獲事件捕獲的思想是最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。事件捕獲的用意在于事件到達(dá)目標(biāo)之前捕獲它。
當(dāng)點(diǎn)擊了頁面中的div元素，那么這個(gè)click事件則會按照如下順序傳播：
document對象
html標(biāo)簽
body標(biāo)簽
div標(biāo)簽
雖然規(guī)范要求事件應(yīng)該從document對象開始傳播，但瀏覽器一般都是從window對象開始捕獲事件的。因?yàn)槔习姹緸g覽器不支持，所以一般都使用事件冒泡。
DOM事件流“DOM2級事件”規(guī)定的事件流包括三個(gè)階段：事件捕獲階段、處于目標(biāo)階段和事件冒泡階段。
在DOM事件流中，實(shí)際的目標(biāo)在捕獲階段不會接收事件。就是說在捕獲階段，事件從document到html再到body后就停止了。下一個(gè)階段是“處于目標(biāo)”階段，于是事件在div中發(fā)生，并在事件處理中被看成是冒泡階段的一部分。然后，冒泡階段發(fā)生。IE8及更早的版本不支持DOM事件流，瀏覽器在捕獲階段觸發(fā)事件對象上的事件，結(jié)果就是有兩個(gè)機(jī)會在目標(biāo)對象上面操作事件。
事件處理程序事件就是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作；事件處理程序（或事件偵聽器）就是響應(yīng)某個(gè)事件的函數(shù)。事件處理程序的名字以“on”開頭，如onload、onclick等。
HTML事件處理程序若要在按鈕被單擊時(shí)執(zhí)行一些js代碼，可以這樣編寫：
Click
注意：不能在其中使用未經(jīng)轉(zhuǎn)義的HTML語法字符。
也可以調(diào)用在頁面中其他地方定義的腳本：
事件處理程序中的代碼在執(zhí)行時(shí)，有權(quán)訪問全局作用域中的任何代碼。
這樣使用會創(chuàng)建一個(gè)封裝著的元素屬性值的函數(shù)。這個(gè)函數(shù)有一個(gè)局部變量event，也就是事件對象：
其中，this值等于事件的目標(biāo)元素，如：
HTML事件處理程序存在眾多問題，所以應(yīng)該使用js指定的事件處理程序
DOM0級事件處理程序要使用js指定事件處理程序，首先必須取得一個(gè)要操作的對象的引用。
每個(gè)元素都有自己的事件處理程序?qū)傩裕@些屬性通常全部小寫，如onclick。如：
使用DOM0級方法指定的事件處理程序被認(rèn)為是元素的方法。因此，這時(shí)候的事件處理程序是在元素的作用域中運(yùn)行的；也就是this引用當(dāng)前元素：
以上述這種方式添加的事件處理程序會在事件流的冒泡階段被處理。
刪除通過DOM0級方法指定的事件處理程序：
btn.onclick = null;DOM2級事件處理程序 addEventListener()
該方法接收三個(gè)參數(shù)：要處理的事件名、事件處理程序函數(shù)和布爾值；布爾值如果是true，表示在捕獲階段調(diào)用事件處理程序；如果是false，表示在冒泡階段調(diào)用事件處理程序。如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
還可以為該按鈕添加多個(gè)事件處理程序，如：
var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
console.log(this.id);
})
btn.addEventListener("click", function () {
console.log(this.value);
})
removeEventListener()
var btn = document.getElementById("btn");
function info () {
console.log(this.value);
}
btn.addEventListener("click", info);
btn.addEventListener("click", function () {
console.log(this.id);
});
btn.addEventListener("click", function valueAndId () {
console.log(this.value + " " + this.id);
});
btn.removeEventListener("click", info); //有效
btn.removeEventListener("click", function () {
console.log(this.id);
}); //無效
btn.removeEventListener("click", valueAndId); //報(bào)錯(cuò)無效
大多數(shù)情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣就可以最大限度地兼容各種瀏覽器。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78464.html
摘要：可以使用偵聽器或處理程序來預(yù)訂事件，以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。響應(yīng)某個(gè)事件的函數(shù)稱為事件處理程序或事件偵聽器?？梢詣h除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實(shí)現(xiàn)的。 事件：文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間。 可以使用偵聽器（或處理程序來預(yù)訂事件），以便事件發(fā)生時(shí)執(zhí)行相應(yīng)的代碼。 1. 事件流 事件流：從頁面中接收事件的順序。 ...
摘要：事件流描述的是從頁面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和事件冒泡階段，其中到是處于目標(biāo)階段，如圖所示。添加的事件會被逆序執(zhí)行。 HTML和js之間的交互是通過事件實(shí)現(xiàn)的。 事件流描述的是從頁面中接受事件的順序。 事件流 IE中的事件流是事件冒泡流。順序是從里向外 eg：div-body-html-...
摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數(shù)，從而添加的匿名函數(shù)也無法被移除。 今天看書又看到事件，遂決定小總結(jié)一下~ JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽器（事件處...
摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數(shù)，從而添加的匿名函數(shù)也無法被移除。 今天看書又看到事件，遂決定小總結(jié)一下~ JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件，就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽器（事件處...
閱讀 2490·2023-04-25 21:41
閱讀 1659·2021-09-22 15:17
閱讀 1931·2021-09-22 10:02
閱讀 2447·2021-09-10 11:21
閱讀 2586·2019-08-30 15:53
閱讀 1006·2019-08-30 15:44
閱讀 959·2019-08-30 13:46
閱讀 1149·2019-08-29 18:36
