跳到主要内容

流

一、认识​

JavaScript 与 HTML 的交互通过事件来完成,可以使用仅在事件发生时执行的监听器订阅事件,这个过程称为观察者模式,使其能够做到页面行为与页面展示的分离。

事件流 描述了页面接收事件的顺序。

二、操作​

2.1 阻止冒泡​

通过 e.stopPropagation() 来阻止冒泡

<div id="outer">
      <div id="inner"></div>
    </div>
    <script>
      const outer = document.getElementById("outer");
      const inner = document.getElementById("inner");

      outer.addEventListener(
        "click",
        (e) => {
          console.log("outer");
          e.stopPropagation();
        },
        { capture: true }
      );
      inner.addEventListener(
        "click",
        (e) => {
          console.log("inner");
          e.stopPropagation();
        },
        { capture: true }
      );
</script>

2.2 阻止事件​

通过 e.stopImmediatePropagation() 相当于 e.stopPropagation() 的增强版，不但可以阻止向上的冒泡，还能够阻止同级的扩散

2.3 获取事件流阶段​

我们如果想知道触发事件的元素属于三个阶段的哪个阶段时，可以通过 e.eventPhase 来获取

二、事件冒泡​

事件冒泡 事件开始时由最具体的元素接收，然后逐级向上传播到 DOM 最顶层节点的过程。

三、事件捕获​

事件捕获 由 DOM 最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

四、DOM 事件流​

DOM2 级事件 将事件流分为三个阶段: 捕获阶段、目标阶段、冒泡阶段。事件捕获最先发生,为提前拦截事件提供了可能.然后实际的目标元素接收到事件。最后进入冒泡阶段,最迟要在这个时候响应事件。即使DOM2级事件规范明确要求捕获阶段不会涉及事件目标,但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。