事件流

事件流

事件流描述的是从页面中接受事件的顺序。分为两种：IE提出的事件冒泡流、Netscape（网景）提出的事件捕获流。

• 事件冒泡流是指具体元素触发事件后，逐级向上传播的方式。
• 事件捕获流是指不太具体的点接收事件后，逐级向下寻找具体的元素进行触发。

DOM事件流

• 事件捕获阶段
• 处于目标阶段 （执行事件）
• 事件冒泡阶段

在逐级向下寻找具体元素的事件捕获阶段，不太具体的元素（如div）不会接收到事件，找到具体元素后，进入到处于莫表阶段，事件在元素上执行。事件在处理过程中进入冒泡阶段。

HTM结构如下

<div id="app">
  <button id="btn">按钮</button>
</div>

事件捕获

<script>
  app.addEventListener('click', function() {
    console.log("app被点击");
  }, true);
  btn.addEventListener('click', function() {
    console.log("btn被点击")
  }, true);
  // 按钮点击后，app先触发，btn后触发。
</script>

事件冒泡

<script>
  app.addEventListener('click', function() {
    console.log("app被点击");
  }, false);
  btn.addEventListener('click', function() {
    console.log("btn被点击")
  }, false);
  // 按钮点击后，btn先触发，app后触发。
</script>

一般情况下，默认的都是事件冒泡阶段触发函数。阻止冒泡的方法
event.stopPropagation()