JS的事件传播,以前完全不知道,今天学习了。
JS的事件(event)是向上传播的,会一直传到根元素。
比如(使用jquery语法):
$("div").click(function(event) {
alert("div clicked");
});
$("span").click(function(event) {
alert("span clicked");
});
span是div的子元素,在点击span的时候,span的click事件向上传播到div的onclick函数里,所以画面会先后弹出“span clicked"和“div clicked”。
如果不想让事件向上传播,有以下几种办法。
1.return false;
$("div").click(function(event) {
alert("div clicked");
});
$("span").click(function(event) {
alert("span clicked");
return false;
});
在span的事件函数里return false,就能阻止span的click事件传到div的onclick函数。
2.调用event.target进行判断
$("div").click(function(event) {
if (event.target == this)
alert("div clicked");
});
$("span").click(function(event) {
alert("span clicked");
return false;
});
event.target是事件发生源的DOM元素。在span的onclick函数里,event.target和this一样,都是span元素;而在div的onclick函数里,event.target是span元素,this是div元素。
3.event.stopPropagation();
$("div").click(function(event) {
alert("div clicked");
});
$("span").click(function(event) {
alert("span clicked");
event.stopPropagation();
});
在子元素的事件函数里调用event.stopPropagation();。
注意:虽然event.target和event.stopPropagation()是纯DOM API,但不是被所有浏览器实现了的。jquery对这两个API做了统一,所有浏览器中都能使用。
当然,事件向上传播也有他的作用。
比如一个需要highlight的例子,有一个按钮区(DIV),里面有很多个按钮(BUTTON),这些元素都是白色。当鼠标移动到DIV时,DIV需要显示成浅灰色,BUTTON们还是白色,接着再移到BUTTON上时,DIV保持浅灰色,BUTTON要变成深灰色。
实现方式是给DIV和每个BUTTON都注册一对onmouseover/onmouseout事件函数,鼠标从按外进入DIV内时,触发DIV的onmouseover,DIV变灰,鼠标再移到DIV内某个BUTTON上时,触发DIV的onmouseout,DIV恢复成白色,这时BUTTON触发了onmouseover而变深灰,而且这个mouseover的event向上传播到了DIV触发了DIV的onmouseover,DIV又变灰,效果就是,当鼠标从DIV移到BUTTON上进,DIV保持灰色。假想一下,如果这个时候DIV没有保持灰色而变回了白色,效果就会很怪。也就是说,这个时候就需要事件上传机制把BUTTON这个子元素的mouseover event上传给DIV。
再举个例子,一个table有1000个row,每个row都要注册一个onclick函数,为每个row注册事件函数写起来容易,但由于循环多和有太多的函数需要内存管理,效率会下降。这个时候就可以写一个单一的事件函数,处理row的父元素,所有row的click event都会向上传播到这个事件函数里来接受处理。1000个事件函数需要注册和管理,现在变成一个,效率自然提升很多。
分享到:
相关推荐
上面例子的html文件 博文链接:https://zhyt710.iteye.com/blog/227892
1、事件冒泡:在javascript事件传播过程中,当事件在一个元素上出发之后,事件会逐级传播给先辈元素,直到document为止,有的浏览器可能到window为止。并不是所有的事件都有冒泡现象,比如如下几个:blur事件 ,...
下面小编就为大家带来一篇js 事件的传播机制(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
主要介绍了JS传播事件、取消事件默认行为、阻止事件传播,通过事件处理程序的返回值 调用顺序讲解了详细的过程,需要的朋友可以参考下
JavaScript中事件冒泡机制示例详析 DOM事件流(event flow )存在三个阶段:事件捕获阶段、 处于目标阶段、 事件冒泡阶段。 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,...
标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome、safari、opera、firefox都支持cancelBubble...
事件传播 MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素。这种自底向上的事件传播方式称为“事件冒泡”,也就是...
事件 事件绑定 DOM行为 事件传播及阻止 事件委托 DOM二级事件
JavaScript给事件委托批量添加事件监听详细流程 ...就是事件从最深的节点开始,然后逐步向上传播事件。 举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一
主要为大家详细介绍了javascript事件的传播基础实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
主要介绍了JavaScript中使用stopPropagation函数停止事件传播例子,即阻止事件冒泡的一个方法,需要的朋友可以参考下
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,...
10.2.5 使用JavaScript处理事件 271 10.3 标准事件模型 273 10.3.1 事件传播 273 10.3.2 注册事件处理程序 274 10.3.3 设置对象的事件处理程序 276 10.3.4 事件的模块和类型 276 10.3.5 Event接口和对象 278 10.4 IE...
为研究新冠病毒在人群中的传播情况,讨论各种防疫措施(佩戴口罩,限制出行,增加医院以及救治速度)对疫情传播的影响。从个人、政府、医疗的三个方面讨论疫情的传播。 前端 采用了简单的html+javascript+boostrap...
javascript事件传播 html如下: <body> <tr><td id=targetTd></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </body> 添加脚本: targetTd.onclick = function (event) { ...
【js事件详解】上 那么什么是事件的执⾏机制呢? 思考⼀个问题 当⼀个⼤盒⼦嵌套⼀个⼩盒⼦的时候,并且两个盒⼦都有点击事件 你点击⾥⾯的⼩盒⼦,外⾯的⼤盒⼦上的点击事件要不要执⾏? 1. 事件的传播 就像上⾯...
事件是javascript中的核心内容之一,在对事件的应用中不可避免的要涉及到一个重要的概念,那就是事件冒泡,在介绍事件冒泡之前,先介绍一下另一个重要的概念事件流: 一.什么是事件流: 文档对象模型(DOM)是一个树...