起泡事件及阻止起泡事件

最新推荐文章于 2021-07-09 17:11:36 发布

一只努力学习的Bear

最新推荐文章于 2021-07-09 17:11:36 发布

阅读量610

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/sun_Hmtl/article/details/78962667

版权

javaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

看API 的时候发现Event属性中２级DOM　事件属性中有谈到起泡事件。

之前并不清楚什么是起泡事件。然后百度了一下

这里推荐几个文章：http://blog.163.com/chtx87_98/blog/static/654011192011830928585/

首先我们先来了解一下２级DOM事件传播的几个阶段：

第一，捕获阶段。事件从 Document 对象沿着文档树向下传递给目标节点。如果目标的任何一个先辈专门注册了捕获事件句柄，那么在事件传播过程中运行这些句柄。

第二个阶段发生在目标节点自身。直接注册砸目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相似。

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

有一个起泡阶段。

那么什么是起泡阶段？

首先你要明白一点，当一个事件发生的时候，该事件总是有一个事件源，即引发这个事件的对象，一个事件不能凭空产生，这就是事件的发生。
当事件发生后，这个事件就要开始传播。为什么要传播呢？因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时，就会产生一个click事件，但这个按钮本身不能处理这个事件（废话），事件必须从这个按钮传播出去，从而到达能够处理这个事件的代码中（例如我们给按钮的onclick属性赋一个函数的名字，就是让这个函数去处理该按钮的click事件）。
当事件在传播过程中，找到了一个能够处理它的函数，这时候我们就说这个函数捕捉到了这个事件。
说到这里，关键的问题来了，那就是一个函数是如何捕捉一个事件的呢？这就涉及到事件的冒泡了。
为了更好地理解冒泡的概念，我建议你现在想象一下你的面前放着一杯水，但这杯水和我们平时看到的有点点不同，它分为数层，每一层又分成一或多个区域，最顶层是我们熟悉的窗口对象（即window对象），下一层分为好几个区域（document对象、history对象等等），而document对象的下一层又分为多个子对象。
这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的，当点击一个按钮时所产生的事件从这个按钮处开始向上传播（就像一个水泡从杯底冒上来，这就是之所以叫事件冒泡的原因），但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义（即该属性指向一个存在的函数或一段可执行的语句），如果有，执行这个函数或语句；然后事件继续向上传播，到达按钮的上一层对象（例如一个form对象或document对象，总之是包含了按钮的父对象），如果该对象也定义了onclick属性，则执行属性的值。
所以，如果这个按钮上面有3层（form、document、window），且这三层都定义了onclick属性，则当按钮的click事件产生时，将会调用4个（包括按钮本身的一个）函数或执行4段语句。
事件的这几个特性在0级dom中也是适用的。

其实这里应该已经很清楚了　但是为了理解我写了一个简单的代码　就一清二楚了：

		<div οnclick="alert('气泡2')">
			<input type="button"  οnclick="alert('气泡1')" value="起泡1" />
		</div>

运行后结果如下：

点击后如下

出现两个对话框。

这就是起泡，一层一层的传递。并都被捕获。

（2）jquery阻止事件起泡实例

1、通过返回false来取消默认的行为并阻止事件起泡。

jQuery 代码:

$("form").bind(

　　"submit",

　　function() {

　　　　return false;

　　 }

);

2、通过使用 preventDefault() 方法只取消默认的行为。

jQuery 代码:

$("form").bind(

　　"submit",

　　function(event){
　　　　event.preventDefault();
　　}

);

3、通过使用 stopPropagation() 方法只阻止一个事件起泡。

jQuery 代码:

$("form").bind(

　　"submit",

　　function(event){
　　　　event.stopPropagation();
　　}

);

（3）关于js事件起泡的验证

今天这个问题主要涉及到几个关键词：对象，触发事件，捕获事件，执行处理、起泡。这其实就是整个js执行的过程。其中冒泡这个过程很有意思。其实就像是一杯水，但是这杯水是分层次的，最底下是当前触发事件的对象。然后越往上范围越大，最顶层肯定是window，倒数第二层是document。气泡在上浮过程中会判断当前所到达的层有没有绑定事件处理方法。有话就执行相应的处理。没有的话就继续起泡。直到到达最顶层的window窗口层。我们可以在任何一层做相应的处理以阻止事件继续起泡。方法就是调用事件对象的阻止起泡的方法。event.stopPropagation();下面是写的一个验证js事件起泡的过程方法。

$(document).ready(function(){

$('.one').click(function(e){

alert('one');

});　　　　　　　　　　　　

$('.two').click(function(e){ 　

alert('two');

});

$('.three').click(function(e){

alert('three');

//阻止起泡取消下面的注释

// e.stopPropagation();

});

</script>

one

two

three

</div>

（4）总结

1.一个事件起泡对应触发的是上层的同一事件
　　特殊：如果two设置成双击事件，那么在你单击two的时候就会起泡触发one单击的事件
　　（双击包含单击）。

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

3.e.stopPropagation()只要在click事件中，就不会触发上层click事件。