摘要:概念事件委托,就是某个事件本来该自己干的,但是自己不干,交给别人来干。冒泡机制,就是父节点监控着一块区域的点击事件,当点击事件触发时,会根据坐标来判断是哪一块区域被点击,然后确定事件对象的属性或者说是属性。
概念
事件委托,就是某个事件本来该自己干的,但是自己不干,交给别人来干。就叫事件委托。打个比方:一个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事件,请问你要怎么做 如果你...
摘要:二事件委托机制知道了事件的捕获冒泡机制,我们可以利用它来实现更方便的程序控制,事件委托便是最典型的应用之一。下面来说说中的事件委托机制。 一、事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监听函数。以下面的HTML结构为例: ...
摘要:事件冒泡由微软提出,事件会从最内从的元素开始发生,再向外传播,正好与事件捕获相反。为了解决上述问题,我们可以利用事件委托的思想,在父级注册一个事件监听器,统一进行子元素的事件处理。 原理 事件捕获 由网景最先提出,事件会从最外层开始发生,直到最具体的元素,也就是说假如父元素与子元素都绑定有点击事件,又互相重叠,那么先出发的会是父元素的事件,然后再传递到子元素。 事件冒泡 由微软提出,事...
阅读 2941·2021-11-16 11:51
阅读 2574·2021-09-22 15:02
阅读 3688·2021-08-04 10:21
阅读 3523·2019-08-30 15:43
阅读 1911·2019-08-30 11:04
阅读 3568·2019-08-29 17:14
阅读 448·2019-08-29 12:16
阅读 2905·2019-08-28 18:31