创建自定义事件的方式有两种:
Event()
CustomEvent()
两者的区别是CustomEvent()
的创建过程中可以传入第二个参数,该参数为对象,且该对象的属性只能写detail
,否则获取不到该参数,详情请看下面代码。
方案一
<div class="custom-event" />
const event = new Event('custom');
let dom = document.querySelector('.custom-event');
dom.addEventListener('custom', event => {
console.log('打印了', event);
});
dom.dispatchEvent(event);
方案二
<div class="custom-event" />
const event = new CustomEvent('custom', { detail: { language: 'JavaScript' } });
let dom = document.querySelector('.custom-event');
dom.addEventListener('custom', event => {
console.log('打印了', event.detail);
});
dom.dispatchEvent(event);