什么是JS事件冒泡?
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。
例1:
点击一个链接,触发绑定在链接元素上的 click 事件,进而触发绑定到这个元素的click事件的函数。
$(
'a'
).bind(
'click'
,
function
() { alert(
"That tickles!"
) });
所以一次点击会触发一个alert。
然后,这个 click 事件会从DOM树向上传递,传播到父元素,然后传递给每一个祖先元素。
在DOM树中, document 是根节点。
Jquery事件冒泡演示
了解了jquery事件冒泡现在来了解如何阻止jquery事件冒泡现在通过一个例子来演示:
例2:
<body>
<div id="divOne" onclick="alert('我是最外层')">
<div id="divTwo" onclick="alert('我是中间层')">
<a id="aThree" href="https://www.baidu.com" onclick="alert('我是最里层')">点击我</a>
<div onclick="alert('我是最里同级层')"></div>
</div>
</div>
</body>
上面这个页面分为三层:
最外层div:divOne;
中间层div:divTwo;
最里层a标签:aThree;
分为三层:divOne是第外层,divTwo中间层,hr_three是最里层; 他们都有各自的click事件,最里层a标签还有href属性。
运行页面后执行结果如下图:
先触发了响应的三个事件然后再触发了"a"标签的行为
通过上例我们不仅了解冒泡事件,并且知道了事件与控件行为的触发顺序:
点击的元素-》父元素-》触发点击元素的响应行为
如何来阻止?
下面来介绍如何阻止事件
冒泡
一共有两种阻止的方式分别为:
1.
event
.stopPropagation();
下面通过案例来演示
<body>
<div id="divOne" onclick="alert('我是最外层')">
<div id="divTwo" onclick="alert('我是中间层')">
<a id="aThree" href="https://www.baidu.com" onclick="alert('我是最里层')">点击我</a>
<div onclick="alert('我是最里同级层')"></div>
</div>
</div>
</body>
<script type="text/javascript">
$('#aThree').click(function(event){
event.stopPropagation();
});
</script>
点击之后的结果为:
先触发了该元素的事件之后触发了该元素的默认行为
所以可以得出
event
.stopPropagation();
可以阻止事件冒泡,但不能阻止触发事件的控件的行为
2.
function(event){
return false;
}
下面通过案例演示:
<body>
<div id="divOne" onclick="alert('我是最外层')">
<div id="divTwo" onclick="alert('我是中间层')">
<a id="aThree" href="https://www.baidu.com" onclick="alert('我是最里层')">点击我</a>
<div onclick="alert('我是最里同级层')"></div>
</div>
</div>
</body>
<script type="text/javascript">
$('#aThree').click(function(event){
return false;
});
</script>
执行后的结果如下:
通过此结果可以得出
return
false;
不仅可以阻止事件冒泡还可以阻止触发事件的元素的默认行为
更多...
而且通过这点我们可以进行进一步分析,一些元素的行为的触发也是通过事件的触发来执行的
function(event){
return false;
}
的返回值来执行的如果return false 则触发事件将不进行传递,并且分析其优先级为:
触发事件的元素通过js绑定事件为最高优先级 >
触发事件的元素默认行为(如:<a href="https://www.baidu.com"></a>)优先级
>
父(包括父父、父父父)元素优先级 > document优先级