栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

js发起自定义事件CustomEvent

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

js发起自定义事件CustomEvent

最近一个项目中需要模拟发起一个扫码枪事件进行测试,之前写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


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/246683.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号