理解js的事件冒泡和事件捕獲

Jeffrrey 發布于2019-08-22 16:40 / 1387人閱讀

摘要：理解的事件冒泡和事件捕獲定義冒泡作用于子元素上的事件會一級一級向上傳遞，類似于冒泡的形式。事件捕獲我們把代碼中的改為然后再次運行，結果如圖此時事件實在捕獲階段執行，也就是說會先觸發的事件。

理解js的事件冒泡和事件捕獲 定義

冒泡：作用于子元素上的事件會一級一級向上傳遞，類似于冒泡的形式。
捕獲：作用于父元素的事件會一級一級向下傳遞到最終的子元素。

使用方法

文檔請參考addEventListener，以及runnoob的addEventListener

EventTarget.addEventListener()語法：

element.addEventListener(event, function, useCapture)

注意useCapture參數，他是一個boolean值，指定事件是否在捕獲或冒泡階段執行。默認為false，如果指定為true，表明在捕獲階段執行，指定為true，表明在冒泡階段執行。

案例參考

先看如下代碼：




    
    test
    



    我是父親
    我是兒子

使用瀏覽器運行這段代碼，效果如下：

我們點擊兒子div，控制臺打印如下：

可以看到第一次打印的target和currentTarget都是son，而第二次事件冒泡到了parent，此時target是son，currentTarget變成了parent。

事件捕獲

我們把代碼中的useCapture改為true：

let pa = document.getElementById("parent");
pa.addEventListener("click", handler, true);
let son = document.getElementById("son");
son.addEventListener("click", handler, true);

然后再次運行，結果如圖：

此時事件實在捕獲階段執行，也就是說會先觸發parent的click事件。

target和currentTarget的區別

仔細看前面的打印信息就知道了，target始終不變，它代表觸發事件的那個元素（不管是冒泡階段還是捕獲階段都是指最底層的元素（這里指son）。而currentTarget則表示當前階段注冊了EventListener的元素。

如何阻止冒泡和捕獲階段事件的進一步傳播

文檔參考：event.stopPropagation

API用法：

event.stopPropagation()

修改我們的代碼，在handler中加入event.stopPropagation()：

    function handler(event) {
        console.log("target: ", event.target);
        console.log("curtrentTarget: ", event.currentTarget);
        event.stopPropagation();
    }

再次運行，點擊兒子div，打印出來的日志如下（冒泡階段）：

捕獲階段打印日志：

可以看到，冒泡階段，點擊事件沒有繼續向上傳播到父元素；捕獲階段，點擊事件沒有繼續向下傳播到子元素。

P.S. 請考慮下在handler方法中，this到底指向target還是currentTarget呢？

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

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

JS 中的事件冒泡與捕獲

摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數來解決實際的問題，不會想到去一探究竟。漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的，J...

Rindia 2019-08-20 11:40 評論0 收藏0
js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

SimonMa 2019-08-29 12:33 評論0 收藏0
js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

raoyi 2019-08-20 16:25 評論0 收藏0
js事件冒泡和事件捕獲

摘要：查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理前段時間開發一個小項目的時候遇到一個問題，即給一個元素以及它的父元素綁定了click事件，這個時候我點擊這個元素時，父級元素的clik事件也會觸發，這顯然不符合要求。查閱了一些資料之后才知道原來這就是事件冒泡，下面是我對事件冒泡和事件捕獲的理解。事件冒泡：事件從...

2i18ns 2019-08-01 16:47 評論0 收藏0
深入理解js Dom事件機制（一）——事件流

摘要：事件捕獲提出的事件流模型稱為事件捕獲。事件代理則是一種簡單有效的技巧，通過它可以把事件處理器添加到一個父級元素上，從而避免把事件處理器添加到多個子級元素上。更新無需重新綁定事件處理器，因為事件代理對不同子元素可采用不同處理方法。首先我們思考一個很有意思的事情：一張紙上畫了兩個同心圓，當我們把手指放到圓心上時，手指指向的不是一個圓，而是紙上的兩個圓，同理之，當我們單擊網頁上的一個div...

OBKoro1 2019-08-21 17:34 評論0 收藏0