什么是事件冒泡与事件捕获,如何阻止事件冒泡
事件冒泡
- 事件由具体的dom节点 接收,然后逐级向上传播到不具体的节点。是一种由内到外的传播。如下图:
示例代码`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
<!--html-->
<div style="width: 400px;height: 400px;background: red" >
事件冒泡(点击这里)
</div>
<script>
var div = document.querySelector("div");
div.addEventListener("click",function (e) {
alert("div")
})
var body = document.querySelector("body");
body.addEventListener("click",function (e) {
alert("body")
})
var html = document.querySelector("html");
html.addEventListener("click",function (e) {
alert("html")
})
</script>
</body>
</html>
事件捕获
- 在事件捕获过程中, document 对象首先接收到 click 事件,然后事件沿 DOM 树依次向下,一直传播到事件的实际目标,是一种由外到内的传播,如下图:
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body >
<!--html-->
<div style="width: 400px;height: 400px;background: red" >
事件冒泡(点击这里)
</div>
<script>
var div = document.querySelector("div");
div.addEventListener("click",function (e) {
alert("div")
},true)
var body = document.querySelector("body");
body.addEventListener("click",function (e) {
alert("body");
},true)
var html = document.querySelector("html");
html.addEventListener("click",function (e) {
alert("html")
},true)
// true:
// true - 事件句柄在捕获阶段执行
// false- 默认。事件句柄在冒泡阶段执行
</script>
</body>
</html>
为什么事件要传播?
当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。
阻止事件冒泡
e.cancelBubble = true;
e.stopPropagation();
cancelBubble 与 stopPropagation 区别。 他们的不同之处是:stopPropagation符合W3C标准.适用于FireFox等浏览器,不支持IE.而cancelBubble方法不符合W3C的标准.且只支持IE浏览器,所以很多时候,我们都要结合起来用。
var body = document.querySelector("body");
body.addEventListener("click",function (e) {
alert("body");
e.cancelBubble = true;
e.stopPropagation();
})