本文实例讲述了 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 错误与调试技巧总结
来源: http://www.jb51.net/article/145010.htm