如何在 JavaScript 中创建和触发事件-之路教程

dispatchEvent

dispatchEvent 在指定的 EventTarget 传递事件，以适当的顺序同步执行受影响的 EventListeners。

与由 DOM 触发并在事件循环的帮助下异步调用事件处理程序的本机事件不同，dispatchEvent 同步执行事件处理程序。

如何在 JavaScript 中创建和触发事件

本教程旨在教我们创建和触发 DOM 事件（也称为合成事件）的正确技术。

我们可以使用 Event 构造函数创建事件，如以下使用 EventTarget.dispatchEvent() 方法的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h1 id="elemId">Welcome to onitroad</h1>
    <script>
      document.addEventListener("welcome", function(event) {
        alert("Hi, " + event.target.tagName); //Hi H1
      });
      let event = new Event("welcome", {
        bubbles: true
      });
      elemId.dispatchEvent(event);
    </script>
  </body>
</html>

addEventListener() 初始化一个函数，只要将定义的事件分派到目标，就会调用该函数。

要将添加数据添加到事件对象，我们可以使用 CustomEvent 接口和 detail 属性来传递自定义数据：

let event = new CustomEvent('eventName', {
  detail: elem.prop.name
});

然后我们可以使用以下代码访问事件侦听器中指定的添加数据：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <h1 id="elemId">Welcome to onitroad</h1>
    <script>
      elemId.addEventListener("welcome", function(event) {
        alert(event.detail.name);
      });
      elemId.dispatchEvent(new CustomEvent("welcome", {
        detail: {
          name: "onitroad"
        }
      }));
    </script>
  </body>
</html>

通常建议从子元素触发事件：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <input type="text"></input>
    <script>
      let text = document.querySelector('input');
      const eventAwesome = new CustomEvent('awesome', {
        bubbles: true,
        detail: {
          text: () => text.value
        }
      });
      text.addEventListener('awesome', e => alert(e.detail.text()));
      text.addEventListener('input', e => e.target.dispatchEvent(eventAwesome));
    </script>
  </body>
</html>

要动态创建和调度事件，我们可以使用以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
  </head>
  <body>
    <input type="text">
    </textarea>
    <script>
      let inputText = document.querySelector('input');
      inputText.addEventListener('awesome', e => alert(e.detail.text()));
      inputText.addEventListener('input', function() {
        this.dispatchEvent(new CustomEvent('awesome', {
          bubbles: true,
          detail: {
            text: () => inputText.value
          }
        }))
      });
    </script>
  </body>
</html>

日期：2020-06-02 22:16:15 来源：oir作者：oir

←JS 如何创建一个包含 1…N 的数组

如何使用js创建全屏覆盖导航菜单→

dispatchEvent

目录