事件委托和冒泡机制

warmcheng 发布于2019-08-21 10:29 / 2226人阅读

摘要：概念事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。冒泡机制，就是父节点监控着一块区域的点击事件，当点击事件触发时，会根据坐标来判断是哪一块区域被点击，然后确定事件对象的属性或者说是属性。

概念

事件委托，就是某个事件本来该自己干的，但是自己不干，交给别人来干。就叫事件委托。打个比方：一个button对象，本来自己需要监控自身的点击事件，但是自己不来监控这个点击事件，让自己的父节点来监控自己的点击事件。

冒泡机制，就是父节点监控着一块区域的点击事件，当点击事件触发时，会根据坐标来判断是哪一块区域被点击，然后确定事件对象的target属性或者说是srcelement属性。确定好了之后，这个事件对象，会往上一层一层的传递，如果当前的事件调用了stopPropagation();那么事件将会停留在这一层，也就是说，事件将不会被之上的层进行监控了

至于说事件委托和冒泡机制的关系，按照我的理解，事件委托知识一种描述性的概念，二冒泡机制才是一种具体的实现方式。

var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
 var button = e.target;//e就表示事件
 if(!button.classList.contains("active"))
  button.classList.add("active");
 else
  button.classList.remove("active");
});

混合云专线服务事件冒泡机制委托事件事件委托冒泡事件

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

转载请注明本文地址：https://www.ucloud.cn/yun/85609.html

事件委托和冒泡机制有关系吗？

摘要：等等，挺在这里，虽然不仅一篇文章阐述了事件委托是利用了冒泡机制，得益于冒泡机制，但是，怎么得益的，怎么利用的。事件委托和冒泡机制有关系吗接下来我想引出本文的重点事件委托和冒泡机制有关系吗我认为就算有关系，关系也不大。面试官提出的问题我们在面试前端的过程中，经常会听到面试官问这样的问题：如果我有一个页面，里面1000个元素都要绑定click事件，请问你要怎么做如果你...

joywek 2019-08-26 14:07 评论0 收藏0
事件冒泡机制与委托机制

摘要：二事件委托机制知道了事件的捕获冒泡机制，我们可以利用它来实现更方便的程序控制，事件委托便是最典型的应用之一。下面来说说中的事件委托机制。一、事件的捕获与冒泡由W3C规定的DOM2标准中，一次事件的完整过程包括三步：捕获→执行目标元素的监听函数→冒泡，在捕获和冒泡阶段，会依次检查途径的每个节点，如果该节点注册了相应的监听函数，则执行监听函数。以下面的HTML结构为例： ...

AprilJ 2019-08-19 18:25 评论0 收藏0
浅谈事件委托机制

摘要：所谓的事件委托，简单的来说就是将一个元素响应事件委托给另外一个元素。而正好浏览器当中有事件冒泡机制，一张图简单了解下浏览器的事件响应机制。适用场景在日常开发过程中，我们经常会遇到这样一种场景：我需要通过ajax从后端获取数据后动态添加dom节点来展示数据，并且这些dom节点有时候又需要是可交互的，例如点击事件。那么在我们获取到数据之前这些dom节点是不存在的，也就是说我们没办法在获...

WelliJhon 2019-08-22 15:14 评论0 收藏0
JS专题之事件模型

摘要：三事件流规定事件包括三个阶段，事件捕获，处于目标阶段事件冒泡。一起来看添加新增加的，点击发现没有反应，说明事件没有绑定进去，但是我们也并不想，每增加一个新元素，就为这个新元素绑定事件，重复低效率的工作应当避免去做。本文共 1960 字，读完只需 8 分钟事件用户与网页交互是通过事件实现的，事件刚开始是作为分担服务器负载的一个手段，起初没有统一的规范，直到 DOM2 级，网景和 I...

W4n9Hu1 2019-08-26 13:24 评论0 收藏0
简单聊聊浏览器JS事件触发机制

摘要：事件冒泡由微软提出，事件会从最内从的元素开始发生，再向外传播，正好与事件捕获相反。为了解决上述问题，我们可以利用事件委托的思想，在父级注册一个事件监听器，统一进行子元素的事件处理。原理事件捕获由网景最先提出，事件会从最外层开始发生，直到最具体的元素，也就是说假如父元素与子元素都绑定有点击事件，又互相重叠，那么先出发的会是父元素的事件，然后再传递到子元素。事件冒泡由微软提出，事...

enrecul101 2019-08-23 15:35 评论0 收藏0