JavaScript捕捉事件和阻止冒泡事件实例分析
本文实例讲述了javascript捕捉事件和阻止冒泡事件。分享给大家供大家参考,具体如下:
今日,项目程序出现异常,后发现跟冒泡事件有关,利用此机会探索一下利用javascript捕获和冒泡事件。
一、要探究捕获和冒泡事件,首先要知道什么是事件的捕获和冒泡,所以呢,先从概念入手;
事件的冒泡:在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
其实事件冒泡是一个从后代节点向祖先节点冒泡的过程,而捕获是从祖先节点到后节点的过程。
我为了方便理解,则用先捕获,后冒泡,捕获从上到下,冒泡从下到上来记忆。我记得从哪儿看到的,有人把捕获比喻为石头沉入海底,而把冒泡比喻为气泡冒出水面。当然了,捕获的深度取决于你的dom布局,海底就有点深了哈,^_^
注意:ie6、ie7、ie8只支持冒泡流,不支持捕获流。
二、为什么要阻止冒泡事件
也许会有人问:为什么要阻止冒泡事件呢?阻止冒泡事件有什么用处呢?
下面我们就来说下为什么要阻止冒泡事件:
先举个例子吧,如下代码:
<html> <div id='div_1' onclick="alert('i'm first!')"> <div id='div_2' onclick="alert('i'm second!')"> <a id="alink" onclick="alert('i'm third!')" href="http://www.baidu.com" rel="external nofollow" >click here</a> </div> </div> </html>
从上面的代码可以看出,div_1是div_2的容器,而div_2是a的容器,总共三层。
我们运行这个实例,点击click here会发现,分别弹出了三个alert提示框,而且顺序为i'm third! 、i'm second!、i'm first!,这就符合我们上面提到的冒泡的概念了。
而我这次碰到的问题就是这样,我称之为“事件重叠”。
出现这种情况,肯定不行,所以我们要阻止该事件冒泡的发生,那如何来阻止呢?下面将。
三、阻止事件冒泡的方法
首先我先给出一个纯javascript版的写法:
function aonclick(e){ window.event? window.event.cancelbubble = true : e.stoppropagation(); }
解释:因为ie里的阻止冒泡的写法为window.event.cancelbubble = true
,其他浏览器为e.stoppropagation();
所以这里做了兼容。
再给出一个jquery版本的写法:
$(function() { $("#alink").click(function(event) { event.stoppropagation(); }); });
四、阻止冒泡的其他方法及不同
我就是用上面的函数阻止了冒泡,但是还有其他的方法可以达到类似的效果,但还是有所不同;
$("#alink").click(function(event) { return false; });
解释:上面方法使用jquery对alink进行了操作,经过测试,得出结论,该函数阻止了冒泡,但是它将a的默认行为也屏蔽掉了(此处为href属性)。这就是不同之处。
顺便说下,javasccript的阻止默认行为的方法
event.preventdefault();
从上面可以看出,return false;
是event.stoppropagation();
和preventdefault()
的并集。
就到这里吧!
更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript事件相关操作与技巧大全》、《javascript页面元素操作技巧总结》、《javascript操作dom技巧总结》、《javascript查找算法技巧总结》、《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》及《javascript错误与调试技巧总结》
希望本文所述对大家javascript程序设计有所帮助。
推荐阅读
-
javascript阻止事件冒泡和浏览器的默认行为
-
Vue阻止事件冒泡和默认行为案例-弗诺缺德-SegmentFault思否
-
JavaScript实现事件的中断传播和行为阻止方法示例
-
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
-
JavaScript中的模拟事件和自定义事件实例分析
-
JavaScript键盘事件常见用法实例分析
-
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
-
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
-
JavaScript停止事件冒泡和取消事件默认行为
-
js/jquery停止事件冒泡和阻止浏览器默认事件教程