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

wuaiqiu 发布于2019-08-23 16:28 / 631人阅读

摘要：结构如下项目名称项目名称列筛选图标代码如下点击列筛选图标这种事件委托的事件绑定方式，在这里出现了事件冒泡，虽然调用了，但仍然会触发绑定在上的排序事件。

在使用 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...

超融合服务器 idc机房托管 js事件委托 js阻止冒泡事件什么是js 事件委托委托事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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