JavaScript 事件——“事件流和事件處理程序”的注意要點

Amio 發布于2019-08-19 17:22 / 3486人閱讀

摘要：事件流級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段。事件處理程序的名字以開頭，如等。如使用級方法指定的事件處理程序被認為是元素的方法。

事件流

事件流描述的是從頁面中接收事件的順序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕獲流。

事件冒泡

即事件開始時由最具體的元素接收，然后逐級向上傳播到較為不具體的節點。如：




    


    Click

當點擊了頁面中的div元素，那么這個click事件會按照如下順序傳播：

div元素

body元素

html元素

document對象

事件捕獲

事件捕獲的思想是最具體的節點應該最后接收到事件。事件捕獲的用意在于事件到達目標之前捕獲它。

當點擊了頁面中的div元素，那么這個click事件則會按照如下順序傳播：

document對象

html標簽

body標簽

div標簽

雖然規范要求事件應該從document對象開始傳播，但瀏覽器一般都是從window對象開始捕獲事件的。因為老版本瀏覽器不支持，所以一般都使用事件冒泡。

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處于目標階段和事件冒泡階段。

在DOM事件流中，實際的目標在捕獲階段不會接收事件。就是說在捕獲階段，事件從document到html再到body后就停止了。下一個階段是“處于目標”階段，于是事件在div中發生，并在事件處理中被看成是冒泡階段的一部分。然后，冒泡階段發生。IE8及更早的版本不支持DOM事件流，瀏覽器在捕獲階段觸發事件對象上的事件，結果就是有兩個機會在目標對象上面操作事件。

事件處理程序

事件就是用戶或瀏覽器自身執行的某種動作；事件處理程序（或事件偵聽器）就是響應某個事件的函數。事件處理程序的名字以“on”開頭，如onload、onclick等。

HTML事件處理程序

若要在按鈕被單擊時執行一些js代碼，可以這樣編寫：

Click

注意：不能在其中使用未經轉義的HTML語法字符。

也可以調用在頁面中其他地方定義的腳本：

事件處理程序中的代碼在執行時，有權訪問全局作用域中的任何代碼。

這樣使用會創建一個封裝著的元素屬性值的函數。這個函數有一個局部變量event，也就是事件對象：

其中，this值等于事件的目標元素，如：

HTML事件處理程序存在眾多問題，所以應該使用js指定的事件處理程序

DOM0級事件處理程序

要使用js指定事件處理程序，首先必須取得一個要操作的對象的引用。

每個元素都有自己的事件處理程序屬性，這些屬性通常全部小寫，如onclick。如：

使用DOM0級方法指定的事件處理程序被認為是元素的方法。因此，這時候的事件處理程序是在元素的作用域中運行的；也就是this引用當前元素：

以上述這種方式添加的事件處理程序會在事件流的冒泡階段被處理。

刪除通過DOM0級方法指定的事件處理程序：

btn.onclick = null;

DOM2級事件處理程序 addEventListener()

該方法接收三個參數：要處理的事件名、事件處理程序函數和布爾值；布爾值如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。如：

var btn = document.getElementById("btn");
btn.addEventListener("click", function () {
    console.log(this.id);
})

還可以為該按鈕添加多個事件處理程序，如：

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); //報錯無效

大多數情況下，都是將事件處理程序添加到事件流的冒泡階段，這樣就可以最大限度地兼容各種瀏覽器。

GPU云服務器云服務器 javascript的事件云主機的要點深度學習的要點 javascript事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78464.html

《JavaScript高級程序設計》學習筆記：JavaScript中的事件流和事件處理程序

摘要：可以使用偵聽器或處理程序來預訂事件，以便事件發生時執行相應的代碼。響應某個事件的函數稱為事件處理程序或事件偵聽器。可以刪除通過級方法指定的事件處理程序。 JavaScript和HTML之間的交互是通過事件實現的。事件：文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用偵聽器（或處理程序來預訂事件），以便事件發生時執行相應的代碼。 1. 事件流事件流：從頁面中接收事件的順序。 ...

Rocko 2019-08-19 17:21 評論0 收藏0
js中的事件流和事件處理程序

摘要：事件流描述的是從頁面中接受事件的順序。事件流中的事件流是事件冒泡流。順序是從外向里級事件規定的事件流包括三個階段事件捕獲階段處于目標階段和事件冒泡階段，其中到是處于目標階段，如圖所示。添加的事件會被逆序執行。 HTML和js之間的交互是通過事件實現的。事件流描述的是從頁面中接受事件的順序。事件流 IE中的事件流是事件冒泡流。順序是從里向外 eg：div-body-html-...

forsigner 2019-08-22 15:59 評論0 收藏0
[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

wangym 2019-08-22 10:57 評論0 收藏0
[學習筆記] 事件（上篇）

摘要：指定事件處理程序指定事件處理程序主要有兩種方式級事件處理程序級事件處理程序。添加事件處理程序注意這里是哦或移除事件處理程序使用移除事件處理程序的條件與方法相同必須提供相同的參數，從而添加的匿名函數也無法被移除。今天看書又看到事件，遂決定小總結一下~ JavaScript與HTML之間的交互是通過事件實現的。事件，就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。可以使用監聽器（事件處...

RayKr 2019-08-01 14:48 評論0 收藏0