最近一个项目中需要模拟发起一个扫码枪事件进行测试，之前写react native调用DeviceEventEmitter这个api就可以了，然而在web中不太常用，最终在mdn中发现了这个构造方法CustomEvent
发起事件
用法
new CustomEvent(eventName, params);
示例
创建一个自定义事件
const event=new CustomEvent('mock-event');
传递参数
这里值得注意，需要把想要传递的参数包裹在一个包含detail属性的对象，否则传递的参数不会被挂载？（这里不太确定，我试过传id和params都不会生效）
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移除事件监听器。
小礼物走一走
作者：mytac
链接：https://www.jianshu.com/p/3dda35dc9b98
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/4759/viewspace-2813648/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
react如何将组件内部的方法暴露给外部
下一篇：
Vue中的混入(vue mixins)
请登录后发表评论
登录
全部评论
