JS创建自定义事件

最新推荐文章于 2024-08-28 14:34:05 发布

天外天-亮

最新推荐文章于 2024-08-28 14:34:05 发布

阅读量178

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44384273/article/details/132404450

版权

创建自定义事件有三个方法：
1、document.createEvent(‘Event’); 被废弃
2、new Event
3、new CustomEvent
被废弃的咱们就不讲了，所以先从new Event说起

new Event直接上代码

let btn1 = document.querySelector('#btn1');
function customevent() {
 let event = new Event('myevent');
   btn1.dispatchEvent(event);
}
 btn1.addEventListener('myevent',function() {
   console.log('自定义事件被触发了');
 });
setTimeout(customevent, 2000);

new CustomEvent上代码

let btn2 = document.querySelector('#btn2');
function customEventInit() {
  event = new CustomEvent('build', {
    'detail': 'hhhhh'
  });
}
function actionFun() {
  btn2.dispatchEvent(event);
}
btn2.addEventListener('build',function(e) {
  console.log(e);
  console.log(e.detail);
});
customEventInit();
setTimeout(actionFun, 1000);

总结：可以看出new CustomEvent功能更丰富，可以带参数，如果不需要带参数，那new Event也是不错的选择。