成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

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

Jeffrrey / 1398人閱讀

摘要：理解的事件冒泡和事件捕獲定義冒泡作用于子元素上的事件會(huì)一級(jí)一級(jí)向上傳遞，類(lèi)似于冒泡的形式。事件捕獲我們把代碼中的改為然后再次運(yùn)行，結(jié)果如圖此時(shí)事件實(shí)在捕獲階段執(zhí)行，也就是說(shuō)會(huì)先觸發(fā)的事件。

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

冒泡：作用于子元素上的事件會(huì)一級(jí)一級(jí)向上傳遞，類(lèi)似于冒泡的形式。
捕獲：作用于父元素的事件會(huì)一級(jí)一級(jí)向下傳遞到最終的子元素。

使用方法 
文檔請(qǐng)參考addEventListener，以及runnoob的addEventListener

EventTarget.addEventListener()語(yǔ)法：

element.addEventListener(event, function, useCapture)

注意useCapture參數(shù)，他是一個(gè)boolean值，指定事件是否在捕獲或冒泡階段執(zhí)行。默認(rèn)為false，如果指定為true，表明在捕獲階段執(zhí)行，指定為true，表明在冒泡階段執(zhí)行。

案例參考

先看如下代碼：




    
    test
    




    我是父親
    
我是兒子

使用瀏覽器運(yùn)行這段代碼，效果如下：

我們點(diǎn)擊兒子div，控制臺(tái)打印如下：

可以看到第一次打印的target和currentTarget都是son，而第二次事件冒泡到了parent，此時(shí)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);

然后再次運(yùn)行，結(jié)果如圖：

此時(shí)事件實(shí)在捕獲階段執(zhí)行，也就是說(shuō)會(huì)先觸發(fā)parent的click事件。

target和currentTarget的區(qū)別

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

如何阻止冒泡和捕獲階段事件的進(jìn)一步傳播 
文檔參考：event.stopPropagation

API用法：

event.stopPropagation()

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

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

再次運(yùn)行，點(diǎn)擊兒子div，打印出來(lái)的日志如下（冒泡階段）：

捕獲階段打印日志：

可以看到，冒泡階段，點(diǎn)擊事件沒(méi)有繼續(xù)向上傳播到父元素；捕獲階段，點(diǎn)擊事件沒(méi)有繼續(xù)向下傳播到子元素。

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94552.html

相關(guān)文章

  • JS 中的事件冒泡與捕獲

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

    Rindia 評(píng)論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時(shí)間開(kāi)發(fā)一個(gè)小項(xiàng)目的時(shí)候遇到一個(gè)問(wèn)題，即給一個(gè)元素以及它的父元素綁定了click事件，這個(gè)時(shí)候我點(diǎn)擊這個(gè)元素時(shí)，父級(jí)元素的clik事件也會(huì)觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    SimonMa 評(píng)論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時(shí)間開(kāi)發(fā)一個(gè)小項(xiàng)目的時(shí)候遇到一個(gè)問(wèn)題，即給一個(gè)元素以及它的父元素綁定了click事件，這個(gè)時(shí)候我點(diǎn)擊這個(gè)元素時(shí)，父級(jí)元素的clik事件也會(huì)觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    raoyi 評(píng)論0 收藏0

  • js事件冒泡和事件捕獲

    摘要：查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。本文參考文章之事件冒泡詳解事件委托及其原理 前段時(shí)間開(kāi)發(fā)一個(gè)小項(xiàng)目的時(shí)候遇到一個(gè)問(wèn)題，即給一個(gè)元素以及它的父元素綁定了click事件，這個(gè)時(shí)候我點(diǎn)擊這個(gè)元素時(shí)，父級(jí)元素的clik事件也會(huì)觸發(fā)，這顯然不符合要求。查閱了一些資料之后才知道原來(lái)這就是事件冒泡，下面是我對(duì)事件冒泡和事件捕獲的理解。 事件冒泡：事件從...

    2i18ns 評(píng)論0 收藏0

  • 深入理解js Dom事件機(jī)制（一）——事件流

    摘要：事件捕獲提出的事件流模型稱(chēng)為事件捕獲。事件代理則是一種簡(jiǎn)單有效的技巧，通過(guò)它可以把事件處理器添加到一個(gè)父級(jí)元素上，從而避免把事件處理器添加到多個(gè)子級(jí)元素上。更新無(wú)需重新綁定事件處理器，因?yàn)槭录韺?duì)不同子元素可采用不同處理方法。 首先我們思考一個(gè)很有意思的事情：一張紙上畫(huà)了兩個(gè)同心圓，當(dāng)我們把手指放到圓心上時(shí)，手指指向的不是一個(gè)圓，而是紙上的兩個(gè)圓，同理之，當(dāng)我們單擊網(wǎng)頁(yè)上的一個(gè)div...

    OBKoro1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<