JS - 關(guān)于事件委托中的事件冒泡

wuaiqiu 發(fā)布于2019-08-23 16:28 / 821人閱讀

摘要：結(jié)構(gòu)如下項(xiàng)目名稱(chēng)項(xiàng)目名稱(chēng)列篩選圖標(biāo)代碼如下點(diǎn)擊列篩選圖標(biāo)這種事件委托的事件綁定方式，在這里出現(xiàn)了事件冒泡，雖然調(diào)用了，但仍然會(huì)觸發(fā)綁定在上的排序事件。

在使用 Datatables 表格插件開(kāi)發(fā)過(guò)程中，給每一列的表頭增加了自定義的列篩選功能，具體是給表頭增加了一個(gè)可點(diǎn)擊的圖標(biāo)，點(diǎn)擊圖標(biāo)觸發(fā)篩選，但是發(fā)現(xiàn)點(diǎn)擊圖標(biāo)的時(shí)候同時(shí)會(huì)觸發(fā) Datatables 自帶的排序功能。

html 結(jié)構(gòu)如下：

  
      項(xiàng)目名稱(chēng)

js 代碼如下：

  // 點(diǎn)擊列篩選圖標(biāo)
  $(".table-section").off(".customSearch").on("click.customSearch", "th.title .addSelect", function (evt) {
    evt.stopPropagation();
    // dosomething ...
  });

這種事件委托的事件綁定方式，在這里出現(xiàn)了事件冒泡，雖然調(diào)用了 evt.stopPropagation(); ，但仍然會(huì)觸發(fā)綁定在 th.title 上的排序事件。

JS事件代理不是基于事件冒泡么，如果委托元素和目標(biāo)元素之間還有元素綁定了相同事件，如何阻止事件冒泡？ -- 知乎

實(shí)際上，事件委托的事件處理函數(shù)是當(dāng)被委托的元素上的事件觸發(fā)時(shí)判斷e.target后執(zhí)行，而不是目標(biāo)元素上的事件被觸發(fā)后就立即執(zhí)行，在沒(méi)有阻止冒泡的情況下，事件還是一層層傳播的，只是處理函數(shù)在事件到達(dá)那一層被觸發(fā)的問(wèn)題。根據(jù)事件代理的規(guī)則，點(diǎn)擊li元素后，click事件是從li至inner至outer一層層冒泡上去的，沿途觸發(fā)各個(gè)元素上的事件處理函數(shù)，如果我們將事件委托在outer上，即使調(diào)用了stopPropagation，也只是阻止了事件從outer向上冒泡，而之前的冒泡過(guò)程必然會(huì)觸發(fā)inner上的click事件，執(zhí)行處理函數(shù)，但是如果將事件委托在inner上，并且阻止冒泡，阻止的是從inner開(kāi)始的冒泡，這樣就可以阻止inner及其祖先元素上的click事件被觸發(fā)。

作者：echizen
鏈接：https://www.zhihu.com/questio...

GPU云服務(wù)器云服務(wù)器 js事件委托 js阻止冒泡事件什么是js 事件委托委托事件

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

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

相關(guān)文章

事件的捕獲、冒泡和委托

摘要：事件捕獲事件冒泡事件委托，這三個(gè)相似又不盡相同的術(shù)語(yǔ)把我搞懵了很長(zhǎng)一段時(shí)間，今天專(zhuān)門(mén)抽時(shí)間挨個(gè)看了一遍。級(jí)規(guī)范瀏覽器自身的事件規(guī)范要求事件應(yīng)該從對(duì)象開(kāi)始向下傳播，找到具體的目標(biāo)前，整個(gè)過(guò)程都是捕獲階段。事件捕獲、事件冒泡、事件委托，這三個(gè)相似又不盡相同的術(shù)語(yǔ)把我搞懵了很長(zhǎng)一段時(shí)間，今天專(zhuān)門(mén)抽時(shí)間挨個(gè)看了一遍。首先，是那個(gè)聞名遐邇的圖 showImg(https://segmentf...

Integ 2019-08-20 18:24 評(píng)論0 收藏0
jQuery 源碼系列（十一）event 總體概述

摘要：而事件委托的概念事件目標(biāo)自身不處理事件，而是將其委托給父元素或祖先元素或根元素，而借助事件的冒泡性質(zhì)由內(nèi)向外來(lái)達(dá)到最終處理事件。而且一旦出現(xiàn)，局部刷新導(dǎo)致重新綁定事件。函數(shù)的用法，代表要移除的事件，表示選擇的，表示事件處理函數(shù)。歡迎來(lái)我的專(zhuān)欄查看系列文章。這次的內(nèi)容是來(lái)介紹關(guān)于 jQuery 的事件委托。不過(guò)在之前呢有必要先來(lái)了解一下 JS 中的事件委托與冒泡，我之前也寫(xiě)過(guò)類(lèi)似的博...

liujs 2019-08-20 14:36 評(píng)論0 收藏0
一個(gè)案例讀懂JS事件委托

摘要：網(wǎng)上有關(guān)于事件委托的一個(gè)取快遞例子，十分生動(dòng)，這里我對(duì)它作一些修改和拓展，然后通過(guò)程序來(lái)說(shuō)明事件委托的機(jī)制。還有一個(gè)優(yōu)點(diǎn)當(dāng)增加新的節(jié)點(diǎn)時(shí)，自動(dòng)攜帶父元素的事件效果。以上便是事件委托的基本思想。與其對(duì)應(yīng)的還有事件捕獲。事件委托(又名事件代理)，就是利用事件冒泡，只指定一個(gè)事件處理程序，就可以管理某一類(lèi)型的所有事件。網(wǎng)上有關(guān)于事件委托的一個(gè)取快遞例子，十分生動(dòng)，這里我對(duì)它作一些修改和拓...

ad6623 2019-08-23 15:55 評(píng)論0 收藏0
DOM事件流與事件委托

摘要：事件流與事件委托事件，即文檔或?yàn)g覽器中發(fā)生的一些特定交互的瞬間，我們可以利用事件監(jiān)聽(tīng)來(lái)預(yù)定事件，當(dāng)事件發(fā)生的時(shí)候執(zhí)行相應(yīng)的處理程序。本文主要討論事件流的三個(gè)階段，及利用事件委托機(jī)制進(jìn)行性能優(yōu)化。事件流與事件委托事件，即文檔或?yàn)g覽器中發(fā)生的一些特定交互的瞬間，我們可以利用事件監(jiān)聽(tīng)來(lái)預(yù)定事件，當(dāng)事件發(fā)生的時(shí)候執(zhí)行相應(yīng)的處理程序。當(dāng)事件發(fā)生在某個(gè)DOM節(jié)點(diǎn)上時(shí)，事件在DOM結(jié)構(gòu)中進(jìn)行一級(jí)...

chaos_G 2019-08-20 11:19 評(píng)論0 收藏0
JS中的事件綁定，事件捕獲，事件冒泡以及事件委托，兼容IE

摘要：事件階段事件分為三個(gè)階段事件捕獲事件目標(biāo)事件冒泡事件捕獲和冒泡事件捕獲事件發(fā)生時(shí)首先發(fā)生在上，然后依次傳遞給最后到達(dá)目的節(jié)點(diǎn)即事件目標(biāo)。事件階段事件分為三個(gè)階段：事件捕獲 --> 事件目標(biāo) --> 事件冒泡事件捕獲和冒泡事件捕獲：事件發(fā)生時(shí)（onclick,onmouseover……）首先發(fā)生在document上，然后依次傳遞給body、……最后到達(dá)目的節(jié)點(diǎn)（即事件...

taowen 2019-08-19 17:39 評(píng)論0 收藏0