什么是事件冒泡与事件捕获，如何阻止事件冒泡

时间 2020-06-03 标签什么事件冒泡捕获如何阻止

什么是事件冒泡与事件捕获，如何阻止事件冒泡

事件冒泡

事件由具体的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事件），或者按钮的父级绑定有事件函数，当该点击事件发生在按钮上，按钮自己并没有处理事件函数，则传播到父级去处理。javascript

阻止事件冒泡

e.cancelBubble = true;
e.stopPropagation();css

cancelBubble 与 stopPropagation 区别。他们的不一样之处是:stopPropagation符合W3C标准．适用于FireFox等浏览器，不支持IE.而cancelBubble方法不符合W3C的标准．且只支持IE浏览器，因此不少时候，咱们都要结合起来用。html

var body = document.querySelector("body");
   body.addEventListener("click",function (e) {
       alert("body");
       e.cancelBubble = true;
       e.stopPropagation();
   })