彻底弄懂JS的事件冒泡和事件捕获
2018-02-05 14:34
459 查看
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。 假设一个元素div,它有一个下级元素p。 <div> <p>元素</p> </div> 这两个元素都绑定了click事件,如果用户点击了p,它在div和p上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么? 两种模型 以前,Netscape和Microsoft是不同的实现方式。 Netscape中,div先触发,这就叫做事件捕获。 Microsoft中,p先触发,这就叫做事件冒泡。 两种事件处理顺序刚好相反。IE只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera's 和 iCab两种都不支持 。 事件捕获 当你使用事件捕获时,父级元素先触发,子级元素后触发,即div先触发,p后触发。 事件冒泡 当你使用事件冒泡时,子级元素先触发,父级元素后触发,即p先触发,div后触发。 W3C模型 W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。 程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕获 false=冒泡 传统绑定事件方式 在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。 ele.onclick = doSomething2 IE浏览器 如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。 ele.attachEvent("onclick", doSomething2); 附:事件冒泡(的过程):事件从发生的目标(event.srcElement||event.target)开始,沿着文档逐层向上冒泡,到document为止。 事件的传播是可以阻止的: • 在W3c中,使用stopPropagation()方法 • 在IE下设置cancelBubble = true; 在捕获的过程中stopPropagation();后,后面的冒泡过程也不会发生了~ 3.阻止事件的默认行为,例如click <a>后的跳转~ • 在W3c中,使用preventDefault()方法; • 在IE下设置window.event.returnValue = false;
<
4000
p>
在学校,听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得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绑的事件……
高下立判!
相关文章推荐
- 彻底弄懂JS的事件冒泡和事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- 彻底弄懂JS的事件冒泡和事件捕获
- 一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
- js之事件冒泡和事件捕获详细介绍
- JS事件捕获和事件冒泡
- js 中的事件冒泡或事件捕获
- js中关于事件捕获与事件冒泡的小实验
- js之事件冒泡和事件捕获
- js响应事件的阶段,捕获阶段,冒泡阶段
- js 事件冒泡详解、 捕获、阻止方法
- js之事件冒泡和事件捕获详细介绍
- JS事件冒泡和事件捕获详解
- js事件的捕获和冒泡阶段
- js中冒泡事件和捕获事件
- js事件冒泡和事件捕获详细介绍
- js 事件冒泡和事件捕获
- js冒泡、捕获事件及阻止冒泡方法详细总结