js发起自定义事件CustomEvent

最近一个项目中需要模拟发起一个扫码枪事件进行测试,之前写react native调用DeviceEventEmitter这个api就可以了,然而在web中不太常用,最终在mdn中发现了这个构造方法CustomEvent

发起事件

用法

new CustomEvent(eventName, params);

示例

创建一个自定义事件

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

传递参数

这里值得注意,需要把想要传递的参数包裹在一个包含detail属性的对象,否则传递的参数不会被挂载?(这里不太确定,我试过传idparams都不会生效)

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
        });

在react中的应用

最好在componentDidMount中调用addEventListener监听事件,在componentWillUnmount中调用removeEventListener移除事件监听器。

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭