all

2024年01月18日

柏拉文

越努力，越幸运

一、event.composedPath()

event.composedPath() 是 Event 接口的一个方法，当对象数组调用该侦听器时返回事件路径。如果影子根节点被创建并且ShadowRoot.mode是关闭的，那么该路径不包括影子树中的节点。

二、event.initEvent() 已废弃

event.initEvent() 方法可以用来初始化由 Document.createEvent() 创建的 event 实例。用这种方式初始化事件必须是由 Document.createEvent() 方法创建的实例。本方法必须在事件被触发之前调用（用EventTarget.dispatchEvent()调用）.事件一旦被调用，便不再做其他任何事。

语法

event.initEvent(type, bubbles, cancelable);

type: 一个 DOMString 类型的字段，定义了事件的类型。
bubbles: 一个 Boolean 值，决定是否事件是否应该向上冒泡。一旦设置了这个值，只读属性 Event.bubbles 也会获取相应的值。
cancelable: 一个 Boolean 值，决定该事件的默认动作是否可以被取消。一旦设置了这个值，只读属性 Event.cancelable 也会获取相应的值。

三、event.preventDefault()

event.preventDefault Event 接口的 preventDefault()方法，告诉user agent：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用stopPropagation() 或stopImmediatePropagation()，才停止传播。

四、event.stopImmediatePropagation()

4.1 认识

event.stopImmediatePropagation() Event 接口的 stopImmediatePropagation() 方法阻止监听同一事件的其他事件监听器被调用。

如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 stopImmediatePropagation() ，那么剩下的事件监听器都不会被调用。

4.2 语法

event.stopImmediatePropagation();

4.3 场景

v-throttle: 通过调用 event.stopImmediatePropagation() 来阻止后续注册的事件触发

import { App } from 'vue';

export default {
  install(app: App<Element>, _options: any) {
    app.directive('throttle', {
      created(el, binding) {
        let wait = binding.value || 3000;
        let previous = 0;

        el.addEventListener('click', (event: any) => {
          let now = +new Date();
          if (now - previous > wait) {
            previous = now;
          } else {
            event && event.stopImmediatePropagation();
          }
        });
      }
    });
  }
};

五、event.stopPropagation()

5.1 认识

event.stopPropagation() 为 Event 接口的 stopPropagation() 方法阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生；

5.2 语法

event.stopPropagation();

5.3 应用场景

阻止 listener 在该类型的事件捕获阶段传播到该 EventTarget 时的传播

<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>

现象: 点击inner元素,只会触发outer注册的事件

阻止 listener 在该 EventTarget 传播到该类型事件的冒泡阶段时的传播

<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();
  });
  inner.addEventListener("click", (e) => {
    console.log("inner");
    e.stopPropagation();
  });
</script>

现象: 点击inner元素,只会触发inner注册的事件

一、event.composedPath()​

二、event.initEvent() 已废弃​

三、event.preventDefault()​

四、event.stopImmediatePropagation()​

4.1 认识​

4.2 语法​

4.3 场景​

五、event.stopPropagation()​

5.1 认识​

5.2 语法​

5.3 应用场景​