js 自定义事件的两种方式

xiaoxiao2021-02-28  51

js 自定义事件的两种方式


方式1

创建事件对象: let customEvent = new CustomEvent('customEventName', { detail: { a: 1 } }) 分派事件: document.dispatchEvent(customEvent) 监听事件: document.addEventListener('customEventName', e => { console.log(e) console.log(e.detail.a) // 1 })

方式2

创建事件对象: let ev = document.createEvent('CustomEvent') 初始化事件对象: ev.initCustomEvent('ev', false, true, {b: 2}) 分派事件: document.dispatchEvent(ev) 监听事件: document.addEventListener('ev', e => { console.log(e) console.log(e.detail.b) // 2 })

方式1创建事件对象后,也可以通过initCustomEvent方法再次初始化事件对象,包括更改自定义事件名称和具体参数。

DOM4 规范 添加了对 CustomEvent 构造函数的支持. CustomEvent(type, { bubbles: false, cancelable: true, detail: null }) type 事件的类型名称. bubbles 一个布尔值,表明该事件是否会冒泡. cancelable 一个布尔值,表明该事件是否可以被取消. detail 当事件初始化时传递的数据.

为了大家深刻理解,具体每个对象和方法的含义,请自行百度。

转载请注明原文地址: https://www.6miu.com/read-2623029.html

最新回复(0)