DDR爱好者之家

JavaScript捕捉事件和阻止冒泡事件实例分析
站长资源 2024/11/26 佚名
45 1538
DDR爱好者之家 Design By 杰米

本文实例讲述了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"htmlcode">



$(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程序设计有所帮助。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米