js发起自定义事件CustomEvent

发起事件

用法

new CustomEvent(eventName, params);

示例

创建一个自定义事件

const event=new CustomEvent('mock-event');

传递参数

这里值得注意，需要把想要传递的参数包裹在一个包含detail属性的对象，否则传递的参数不会被挂载

function createEvent(params, eventName = 'mock-event') {
    return new CustomEvent(eventName, { detail: params });
}
const event = createEvent({ id: '0010' });

发起事件

调用dispatchEvent方法发起事件，传入你刚才创建的方法

window.dispatchEvent(event);

监听事件

 window.addEventListener('mock-event', ({ detail: { id } }) => {
    console.log('id',id) // 会在控制台打印0010
});

例：

document.body.addEventListener('show', (event) => { console.log(event.detail); });
// 触发
let myEvent = new CustomEvent('show', {
    detail: {
        username: 'xixi',
        userid: '2022'
    }
});
document.body.dispatchEvent(myEvent);