如何创建 JavaScript / DOM 自定义事件

本文链接：https://blog.csdn.net/sunyctf/article/details/141087407

摘要：本文介绍了如何在JavaScript中创建自定义事件，包括使用Event构造函数、监听自定义事件和触发事件。通过示例展示了如何在组件间传递数据，并对比了Event与CustomEvent的区别，强调了CustomEvent在自定义参数传递上的优势。

你肯定处理过很多的事件监听，比如，点击事件或者表单提交。事件监听对许多用例来说很有帮助，但是有时我们需要创建自己的自定义事件来处理复杂的交互。在这片短文中，我将告诉你有关创建自定义事件，侦听自定义事件以及创建双击自定义事件所要了解的内容。

一、怎么创建自定义事件

创建自定义事件听起来很困难，但是只需要下面简单的一行代码即可。

const myEvent = new Event("myCustomEvent")

Event构造函数接受两个参数：第一个参数type是字符串，表示自定义事件的名称；第二个参数options是一个对象，表示事件对象的配置，该对象主要有下面两个属性：

bubbles：布尔值，可选，默认为false，表示事件对象是否冒泡。
cancelable：布尔值，可选，默认为false，表示能否用 event.preventDefault() 阻止浏览器默认事件。

二、怎么侦听自定义事件

你可以通过事件构造函数创建一个新的 Event 对象。在最基本的形式中，你只需要将一个字符串传递给构造函数，这个字符串就是你定义的事件名称。为了监听这个事件，你可以将该事件监听器添加到你要监听的元素上，如下：

document.addEventListener("myCustomEvent", e => {
  console.log(e)
})

三、触发自定义事件

最后一步，你需要做的事，触发创建并正在监听的事件。

document.dispatchEvent(myEvent)

完整实例：

<button type="button" id="btn">点我</button>
 
<script>
    var btn = document.getElementById('btn');
    var eve = new Event('msg');
 
    btn.addEventListener('msg', function(event){
        console.log('hello');
    }, false)
 
    btn.dispatchEvent(eve); // hello
    
</script>

如何应用：

我们什么时间使用new Event自定义事件？我的一个公共组件里用到了，因为这个公共组件会用到很多页面，或者说这个公共组件里的数据会被很多页面使用，也就是说涉及传值的地方很多，有童鞋会问为什么不用emit事件传值呢，因为你把公共组件传给的文件不一定是父组件，也可能是爷组件。。。这时候就可以使用自定义事件进行传值。

1. 在公共组件中创建自定义事件并且触发它；

<template>
    <button type="button" id="btn" @click="btnClick">点我</button>
</template>
<script>
    exprort default {
      methods:{
        btnClick(){
            let eve = new Event('msgClick'); //创建自定义事件（名字叫‘msgClick’）
            let formData = {a:1,b:2,c:3}
            //向eve中添加数据，传送给侦听者
            for (const key in formData){
              eve[key] = formData[key]
            }
            document.dispatchEvent(eve); // 触发自定义事件
        }
      }
    }
    
</script>

2. 接收公共组件传过来的值的页面；（可以是任何使用公共组件的页面）

document.addEventListener('msgClick', function(eve){
     console.log(eve);  //打印出这个事件看看里面有什么
     console.log(eve.a) // 1
}, false)

补充：new Event()和new CustomEvent()的区别

new CustomEvent(type, options)

CustomEvent 用法与 Event 一致，区别是 CustomEvent(type, options) 第二个参数 options 对象的detail属性可以绑定数据，即我们自定义传参：

<button type="button" id="btn">点我</button>
 
<script>
    var btn = document.getElementById('btn');
    var eve = new CustomEvent('msg', {
        detail: {
            info: "hello word"
        }
    });
 
    btn.addEventListener('msg', function (event) {
        console.log(event.detail.info);
    }, false)
 
    btn.dispatchEvent(eve); // hello word
</script>

所以，一般使用更加推荐 CustomEvent。

**总结：如何自定义一个DOM事件，并且编程式触发它?

使用new Event('自定义事件名') 或 new CustomEvent('自定义事件名')

**① new CustomEvent('自定义事件名')**

在JavaScript中，自定义DOM事件可以通过`CustomEvent`构造函数来创建，并可以使用`dispatchEvent`方法来触发。以下是一个示例：

// 自定义事件名
const CUSTOM_EVENT_NAME = "myCustomEvent";
 
// 监听自定义事件
document.addEventListener(CUSTOM_EVENT_NAME, function(event) {
    console.log("自定义事件被触发", event.detail);
});
 
// 创建自定义事件
const customEvent = new CustomEvent(CUSTOM_EVENT_NAME, {
    detail: { message: "Hello, this is my custom event!" }
});
 
// 触发自定义事件
document.dispatchEvent(customEvent);

在这个例子中，我们创建了一个名为`myCustomEvent`的自定义事件，并在文档上添加了一个监听器来监听这个事件。然后，我们创建了一个`CustomEvent`实例，并通过`dispatchEvent`方法触发了这个事件。当事件被触发时，监听器会在控制台输出事件的详细信息。

**② 使用new Event('自定义事件名')**

在JavaScript中，‌`new Event()` 是一个构造函数，‌用于创建一个新的 `Event` 对象。‌这个对象代表了可以被派发到目标对象上的事件。‌你可以通过传递一个字符串作为第一个参数给 `Event` 构造函数来指定事件的类型（‌比如 `'click'`、‌`'load'`、‌`'customEvent'` 等）‌。‌

这里是一个简单的例子，‌展示了如何创建一个自定义事件并触发它：‌

// 创建一个自定义事件
const myEvent = new Event('myCustomEvent', {
  bubbles: true, // 事件是否冒泡
  cancelable: true // 事件是否可以取消
});

// 定义一个事件监听器
function myEventListener(e) {
  console.log('myCustomEvent 被触发了！‌', e);
}

// 为某个元素（‌比如 document）‌添加事件监听器
document.addEventListener('myCustomEvent', myEventListener);

// 触发事件
document.dispatchEvent(myEvent);

在这个例子中，‌我们首先使用 `new Event()` 创建了一个名为 `'myCustomEvent'` 的新事件对象，‌并设置了 `bubbles` 和 `cancelable` 属性。‌

然后，‌我们定义了一个名为 `myEventListener` 的函数，‌这个函数将在 `'myCustomEvent'` 事件被触发时执行。‌接着，‌我们使用 `addEventListener` 方法为 `document` 对象添加了 `'myCustomEvent'` 事件的监听器。‌

最后，‌我们通过调用 `dispatchEvent` 方法在 `document` 上触发了 `'myCustomEvent'` 事件，‌这导致 `myEventListener` 函数被执行，‌并在控制台中输出了相应的信息。‌