jq事件冒泡

来源：互联网发布：linux 命令下载libgcj 编辑：程序博客网时间：2024/05/16 18:39

事件冒泡：

当一个事件发生时，该事件总共有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。
当事件发生时，这个事件就要开始传播，从而能够达到处理这个事件的代码中，（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。
当事件在传播的过程中，找到了一个能够处理它的函数，此时可以说这个函数捕捉到了这个事件。那一个函数是如何捕捉一个事件呢？这个就涉及到事件的冒泡了。

为了更好的理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。这些对象的层次关系构成了DOM中的对象树。

DOM树：

这里写图片描述

例如:按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。

事件捕获中，事件首先会交给最外层的元素，接着再交给更具体的元素

事件冒泡中，当事件发生时，会首先发送给最具体的元素，在这个元素获得响应机会之后，事件会向上冒泡至更一般的元素，事件冒泡有时候会产生副作用。

什么浏览器采用的是“事件捕获”模式，而又有哪些采用的是“事件冒泡”模式呢？

最终出台的DOM标准规定应该同时使用这两种策略：首先，事件要从一般到具体进行捕获，钴，事件再通过冒泡返回DOM树的顶层。而事件处理可以注册到这个过程中的任何一部分。即，可以把事件处理程序注册到事件捕获阶段，也可以注册到事件冒泡阶段。

jquery中可以假定最具体的元素会首先获得响应事件的机会

阻止事件冒泡

表现事件冒泡的代码

<body><div id="divOne" onclick="alert('我是最外层');">    <div id="divTwo" onclick="alert('我是中间层');">        <a id="hr-three" href="http://www.baidu.com"mce_href="http://www.baidu.com" onclick="alert('我是最里层！')">            点击我        </a>    </div></div></body>

从这个代码就可以看出事件冒泡的过程，只点击了“点击我”，就会依次弹出“我是最里层—->我是中间层—->我是最外层—->然后再链接到百度. ”，本来只点击ID为hr_three的标签，但执行了三个alert的操作；过程：hr_three—->divTwo—->divOne。从最里层冒泡到最外层。

四种阻止冒泡的方法

1.even.stopPropagation();

<script src="jquery-1.10.1.min.js"></script><script>    $(function(){        $("#hr_three").click(function(event){            event.stopPropagation();        });    });</script>

even.stopPropagation():终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。

此时点击“点击我”，就阻止了事件冒泡，但不会阻止默认行为，会弹出“我是最里层”，然后链接到百度

2.return false;

<script src="jquery-1.10.1.min.js"></script><script>    $(function(){        $("#hr_three").click(function(event){            return false;        });    });</script>

点击“点击我”，会弹出“我是最里层”，但不会链接到百度

作用是：事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）

3.event.preventDefault();

<script src="jquery-1.10.1.min.js"></script><script>    $(function(){        $("#hr_three").click(function(event){            event.preventDefault();        });    });</script>

点击“点击我”，会发现它依次弹出：我是最里层—->我是中间层—->我是最外层，但最后却没有跳转到百度

作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为（它只执行所有弹框，却没有执行超链接跳转）

注：一个事件起泡对应触发的是上层的同一事件

如果在click事件中，在你要处理的事件之前加上e.preventDefault();那么就取消了行为（通俗理解：相当于做了个return操作），不执行之后的语句了。

阅读全文

0 0