事件冒泡:
当一个事件发生时,该事件总共有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生时,这个事件就要开始传播,从而能够达到处理这个事件的代码中,(例如我们给按钮的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操作),不执行之后的语句了。