事件流，事件捕获与事件冒泡-基础知识总结------彭记（018）

Posted 2020-10-05

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件流，事件捕获与事件冒泡-基础知识总结------彭记（018）相关的知识，希望对你有一定的参考价值。

事件流：

-事件流包括三个阶段-事件捕获阶段、处于目标阶段和事件冒泡阶段。

-首先发生的是事件捕获，为截获事件提供了机会，然后是实际的目标接收到事件，最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

事件冒泡：

-事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点（文档）。

<!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>
  <div id="myDiv">Click Me</div>
</body>
</html>

-如果你单击了页面中的<div>元素，那么这个click事件会安装如下顺序传播：

1，<div>

2，<body>

3，<html>

4，document

-也就是说，click事件首先在<div>元素上发生，而这个元素就是我们单击的元素，然后，click事件沿DOM树想上传播，在每一级节点上都会发生，直至传播到document对象

-所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别，IE5.5及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到document），IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

事件冒泡带来的影响：

-假如前代元素和后代元素都绑定了同类型的事件，当后代元素触发的时候，同时会冒泡到前代元素上，此时，两个完全不同的功能有一个元素触发 -- 不对劲

-解决方式：阻止事件冒泡

-事件对象 -- 谷歌和火狐支持 --- ie8不支持

event.stopPropagation();

-谷歌，ie的方法：

window.event.cancelBubble = true;

事件捕获:

是不太具体的元素应该更早接受到事件，而最具体的节点应该最后接收到事件。他们的用意是在事件到达目标之前就捕获它；也就是跟冒泡的过程正好相反，以html的click事件为例，document对象（DOM级规范要求从document开始传播，但是现在的浏览器是从window对象开始的）最先接收到click事件的然后事件沿着DOM树依次向下传播，一直传播到事件的实际目标

以上是关于事件流，事件捕获与事件冒泡-基础知识总结------彭记（018）的主要内容，如果未能解决你的问题，请参考以下文章