事件冒泡 vs 事件捕获 vs 事件委托

本主要用于理解这JS的这三种事件的专业术语所表述的意义：

在学校，听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样，只依稀记得IE使用的是事件冒泡，其他浏览器则是事件捕获。当时的我，把它当成IE浏览器兼容问题，所以没有深究（IE8以下版本的浏览器已基本退出市场）。工作至今，虽然多次遇到该类问题，但均未深究，始终一知半解，遇到了全TM靠猜（选A不行就选B呗）。今天闲来无事自己做了个demo,算是把这个问题彻底搞明白了。

先上结论：他们是描述事件触发时序问题的术语。事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我的爹和祖宗的事件就不要触发了。

这是HTML结构

<div id="parent"><div id="child" class="child"></div>
</div>

现在我们给它们绑定

    document.getElementById("parent").addEventListener("click",function(e){alert("parent事件被触发，"+this.id);})document.getElementById("child").addEventListener("click",function(e){alert("child事件被触发，"+this.id)})

结果：

child事件被触发，child
parent事件被触发，parent

结论：先child，然后parent。事件的触发顺序自内向外，这就是事件冒泡。（注意结果出现的先后顺序）

现在改变第三个参数的值为true

  document.getElementById("parent").addEventListener("click",function(e){alert("parent事件被触发，"+e.target.id);},true)document.getElementById("child").addEventListener("click",function(e){alert("child事件被触发，"+e.target.id)},true)

结果：

parent事件被触发，parent
child事件被触发，child

结论：先parent,然后child。事件触发顺序变更为自外向内，这就是事件捕获。

貌似没什么卵用，上一个利用事件冒泡的案例，反正我是经常会用到。
复制代码

<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li>
</ul>

需求是这样的：鼠标放到li上对应的li背景变灰。

利用事件冒泡实现：

$("ul").on("mouseover",function(e){$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})

也许有人会说，我们直接给所有li都绑上事件也可以啊，一点也不麻烦，只要……

$("li").on("mouseover",function(){$(this).css("background-color","#ddd").siblings().css("background-color","white");
})

是，这样也行。而且从代码简洁程度上，两者是相若仿佛的。

区别，前者少了一个遍历所有li节点的操作，所以在性能上肯定是更优的。

还有就是，如果我们在绑定事件完成后，页面又动态的加载了一些元素……

$("<li>item7</li>").appendTo("ul");

这时候，第二种方案，由于绑定事件的时候item7还不存在，所以为了效果，我们还要给它再绑定一次事件。而利用冒泡方案由于是给ul绑的事件……
这时候就涉及到我们后面说的事件委托，我们的目的是鼠标移动到li上发生对应的事件，但是我们可以采用不将事件直接绑定至li元素，而是对li的父级ul进行绑定，只是在绑定ul时去判断触发点是在ul的哪个子元素，这样就达到了事件委托的效果；

利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。前段时间面试被问到事件委托机制我竟然全无印象，今天重看本文甚为惭愧。补充一点jquery的on方法。
$("ul").on("click","li",function(){}); //这样写有事件委托。
$("ul li").on(); //这样写法则没有。

本文内容摘自网络： https://www.cnblogs.com/qq9694526/p/5653728.html/

事件冒泡 vs 事件捕获 vs 事件委托的区别相关推荐

关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
js /jquery停止事件冒泡和阻止浏览器默认事件
var el = window.document.getElementById("a");el.onclick = function (e) {//如果提供了事件对象,则这是一个非 ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
事件冒泡详解及阻止事件冒泡
什么是事件冒泡? 事件冒泡:从子元素向父元素触发 ->当某个事件触发时,同样的事件会向父元素触发. 但并不是所有事件都会产生冒泡问题 onfocus. onblur .onload不会产生冒泡问 ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
事件捕获、冒泡、绑定、赋值、委托、兼容、滚轮
clientX/Y 可视区的鼠标坐标全兼容 offsetX/Y 鼠标坐标到物体边框的距离 IE+Chrome page ...
事件委托、事件冒泡与事件捕获
目录事件委托: 1.原理 2.实现 ①在介绍事件委托的方法之前,我们先来看一段一般方法的例子: ②那么我们用事件委托的方式做又会怎么样呢? ③要是每个li被点击的效果都不一样,那么用事件委托还有用吗 ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...

事件冒泡 vs 事件捕获 vs 事件委托的区别

事件冒泡 vs 事件捕获 vs 事件委托

事件冒泡 vs 事件捕获 vs 事件委托的区别相关推荐

最新文章

热门文章

事件冒泡 vs 事件捕获 vs 事件委托 的区别

事件冒泡 vs 事件捕获 vs 事件委托

事件冒泡 vs 事件捕获 vs 事件委托 的区别相关推荐

最新文章

热门文章

事件冒泡 vs 事件捕获 vs 事件委托的区别

事件冒泡 vs 事件捕获 vs 事件委托的区别相关推荐