何为冒泡

bubble

如上图,当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。用最简单的代码举个栗子。

1
2
3
4
5
<body onclick="alert('From body');">
<div onclick="alert('From div');">
<a href="#" title='Message' onclick="alert('from a');">提示</a>
</div>
</body>

上面这段代码一共有三个事件,<body><div><a>都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒泡的过程是:a –> div –> body 。a冒泡到div冒泡到body,从里向外。

引发问题

本来在上面的代码中只想触发<a>元素的onclick事件,然而<div>,<body>事件也同时 触发了。因此我们必须要对事件的作用范围进行限制。当单击<a>元素的onclick事件时只触发<a>本身的事件。由于IE- DOM和标准DOM实现事件对象的方法各不相同,导致在不同浏览器中获取事件的对象变得比较困难。如果想阻止事件的传递,我们可以用event.stopPropagation()阻止事件的传递行为.

阻止事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" >
<script type = "text/javascript" >
var onBodyClickFn = function() {
alert("我是body上事件");
}
window.onload = function() {
var body = document.body;
body.addEventListener('click', onBodyClickFn, false); // false 冒泡阶段
//停止事件冒泡
document.getElementById("stopBubble").addEventListener("click",
function(event) {
alert("我是stopBubble_btn上事件");
event.stopPropagation();
},
false);
//正常事件冒泡
document.getElementById("bubble").addEventListener("click",
function() {
alert("我是bubble_btn上事件");
},
false);
};
</script>
</head > <body > <button id = 'stopBubble' > 阻止冒泡 </button>
<button id="bubble">正常事件冒泡</button > </body>
</html>

阻止默认事件

Vue中的阻止事件冒泡

未完待续

Comments

⬆︎TOP