CustomEvent自定义事件

javascript与HTML之间的交互是通过事件来实现的。事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。通常大家都会认为事件是在用户与浏览器进行交互的时候触发的，其实通过javascript我们可以在任何时刻触发特定的事件，并且这些事件与浏览器创建的事件是相同的。

1、构造方法 CustomerEvent() 创建一个新的 CustomEvent 对象。

event = = new CustomEvent(typeArg ,customEventInit)

参数说明：

1、typeArg是DOMString代表事件的名称。一个表示 event 名字的字符串

2、customEventInit（可选）：一个字典类型参数，有如下字段

• detail, 可选的默认值是 null 的任意类型数据，是一个与 event 相关的值
• bubbles 一个布尔值，表示该事件能否冒泡。 来自 EventInit。注意：测试chrome默认为不冒泡。
• cancelable 一个布尔值，表示该事件是否可以取消。 来自 EventInit

 

案例：

        const ev = document.getElementById('ev');
        const event = new CustomEvent('eventName', {
             detail: {
                   message: 'Hello World',
                   time: new Date(), 
            },
            bubbles: true,
            cancelable: true,
        } );
        ev.addEventListener('eventName',function(e){
           console.log(e);
        },);
        setTimeout(function () {
           ev.dispatchEvent(event);//给节点分派一个合成事件
        }, 1000);

 

结果：

 API 的兼容性如下图：

 

可以看到现代浏览器基本都支持了这个自定义的事件。

代码如下;

    
    


    

    

文章参考：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent

                 https://www.jianshu.com/p/71bb3cf19095