自定义事件 Event 与 CustomEvent

window.addEventListener() 添加事件监听

window.dispatchEvent() 抛出事件

Event算是一个顶级接口，CustomEvent基于Event，增加了部分参数

Event

event = new Event(typeArg, eventInit);

typeArg

是DOMString 类型，表示所创建事件的名称。

eventInit可选

是 EventInit 类型的字典，接受以下字段:

"bubbles"，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。

"cancelable"，可选，Boolean类型，默认值为 false，表示该事件能否被取消。

"composed"，可选，Boolean类型，默认值为 false，指示事件是否会在影子DOM根节点之外触发侦听器。

window.addEventListener('custom', customHandler)
function customHandler(params) {
    // 打印事件对象 在5秒后 出现打印，可以看到我们自定义的参数
    console.log(params)
}

setTimeout(() => {
    // 创建自定义事件
    let event = new Event('custom');
    // 如果希望事件带参数，可以把参数放在事件对象上
    event.name = 'custom-name';
    event.detail = {
        age: 20
    }
    event.ppp = '这是一个锅'

    // dispatchEvent 返回一个 boolean 值
    let result = window.dispatchEvent(event)
    console.log(result);
}, 5000)

CustomEvent

event = new CustomEvent(typeArg, customEventInit);

typeArg

一个表示 event 名字的字符串

customEventInit可选

一个字典类型参数，有如下字段

"detail", 可选的默认值是 null 的任意类型数据，是一个与 event 相关的值

bubbles 一个布尔值，表示该事件能否冒泡。来自 EventInit。注意：测试chrome默认为不冒泡。

cancelable 一个布尔值，表示该事件是否可以取消。来自 EventInit

window.addEventListener('custom', customHandler)
function customHandler(params) {
    // 打印事件对象 在5秒后 出现打印，可以看到我们自定义的参数
    console.log(params)
}
setTimeout(() => {
    // 创建事件对象
    let event = new CustomEvent('Eric', {
        // 这里可直接传入 自定义的事件参数
        detail: {
            height: 100,
            widht: 100,
            rect: 10000
        }
    })
    // 同样 我们也可以直接在事件对象上绑定 参数
    event.name = 'custom-event'
    window.dispatchEvent(event)
}, 5000)

最后编辑于：2021.05.10 02:24:14