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

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

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

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

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

  
      項目名稱

js 代碼如下：

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

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

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

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

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

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

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

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

相關(guān)文章

事件的捕獲、冒泡和委托

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

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

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

liujs 2019-08-20 14:36 評論0 收藏0
一個案例讀懂JS事件委托

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

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

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

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

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

taowen 2019-08-19 17:39 評論0 收藏0