new Event 创建 JavaScript 自定义事件

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

一、怎么创建自定义事件

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

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。

new Event 创建 JavaScript 自定义事件

一、怎么创建自定义事件

猜你喜欢