js 自定义事件与触发

通常是用户与页面进行交互的时候触发事件，比如点击某个元素触发click事件，鼠标移入移出触发mouse相关事件等，但是有的时候我们在写代码的时候需要手动触发某个事件，这可以是浏览器自带的事件也可以是我们自定义的事件。

1.手动触发某个事件

dispatchEvent(event)

具体用法看下面的demo，后面会用到。

2.如何声明一个事件

注意这个事件可以是浏览器现有的，比如click，resize等，也可以是任意名称

方式一：new Event(type, options)

这种方式可以设置事件是否冒泡

image.png

方式二：new CustomEvent(type, options)

这种方式可以给事件带其他参数

image.png

方式三：createEvent + initEvent 注意：已经废弃!

注意：这种方式不再推荐，有的博客有提到这种方式。

image.png

// 创建事件
const event = document.createEvent("Event");

// 定义事件名称为 'build'。
event.initEvent("build", true, true);

// 监听事件。
elem.addEventListener(
  "build",
  (e) => {
    // e.target 与元素匹配
  },
  false,
);

// 目标可以是任何元素或其他 EventTarget。
elem.dispatchEvent(event);

最后，完整demo代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <div>
    <button id="btn1">触发resize事件</button>
    <button id="btn2">触发自定义"sayBingGan"事件</button>
  </div>
  <script>
    {
      const btn1 = document.getElementById("btn1");
      btn1.addEventListener("click", () => {
        // 触发resize事件
        window.dispatchEvent(new Event("resize"));
      });

      // 监听resize事件
      window.addEventListener("resize", () => {
        console.log("resize event fired");
      });
    }
    {
      const btn1 = document.getElementById("btn2");
      btn1.addEventListener("click", () => {
        // 方式一：创建自定义事件 Event
        // let myEvent = new Event("sayBingGan");
        // 方式二：更高级方式创建自定义事件， Event + 参数
        let myEvent = new CustomEvent("sayBingGan", {
          // 自定义数据
          detail: {
            a: "参数1",
            b: "参数2",
          },
        });

         // 方式三：createEvent + event.initEvent(type, bubbles, cancelable) -- 已经弃用
         // 警告：与 createEvent 一起使用的许多方法（例如 initCustomEvent）已被弃用。请使用 event 构造函数代替。

        // 触发事件
        window.dispatchEvent(myEvent);
      });

      // 监听事件
      window.addEventListener("sayBingGan", (e) => {
        console.log("sayBingGan event fired", "饼干", e);
      });
    }
  </script>
</html>

若对你有帮助，请点个赞吧，若能打赏不胜感激，谢谢支持！
本文地址：https://www.jianshu.com/p/46bcee7e559e?v=1726299370541，转载请注明出处，谢谢。

参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

最后编辑于：2024.09.14 15:37:00