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

时间 2019-11-18

原文原文链接

事件流：html

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

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

事件冒泡：spa

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

<!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事件会安装以下顺序传播：htm

1，<div>对象

2，<body>blog

3，<html>事件

4，document文档

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

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

事件冒泡带来的影响：

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

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

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

event.stopPropagation();

-谷歌，ie的方法：

window.event.cancelBubble = true;

事件捕获:

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