JS - 關于事件委托中的事件冒泡

wuaiqiu 發布于2019-08-23 16:28 / 766人閱讀

摘要：結構如下項目名稱項目名稱列篩選圖標代碼如下點擊列篩選圖標這種事件委托的事件綁定方式，在這里出現了事件冒泡，雖然調用了，但仍然會觸發綁定在上的排序事件。

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

html 結構如下：

  
      項目名稱

js 代碼如下：

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

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

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

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

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

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

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

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

事件的捕獲、冒泡和委托

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

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

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

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

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

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

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

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

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

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