自定义事件的触发 dispatchEvent 的用法

简介: 自定义事件的触发 dispatchEvent 的用法

window.addEventListener && window.dispatchEvent

一、标准浏览器提供了可供元素触发的方法:element.dispatchEvent(),在使用之前,需要创建和初始化,下面是具体的用法:

vue中举例:

1.通过 var event = document.createEvent("HTMLEvents"); 这个方法创建一个event对象实例


2.通过 event.initEvent("aaa", true, true); 初始化一个aaa事件,// 3个参数:事件类型,是否冒泡,是否阻止浏览器的默认行为

注意:/*属性,可以随便自己定义*/

event.name = 'hello, 我是小礼';
event.message = '我今年18岁';


3.然后通过 window.dispatchEvent(event); 方法触发自定义事件aaathis.$nextTick(tick => {
     var event = document.createEvent("HTMLEvents");
     event.initEvent("aaa", true, true);
     window.dispatchEvent(event);
})

4.最后在需要监听这个事件的页面,通过window.addEventListener('aaa', function(){});即可监听到事件的执行

window.addEventListener('aaa', function (event) {
    console.log(event.name+','+event.message);
}, false);
//控制台就可以打印出监听的结果:hello, 我是小礼,我今年18岁

dispatchEvent大概就是这三步

下面再看看一段代码,非IE主流浏览器及IE下的事件触发器

var fireEvent = function(element,event){
      if (document.createEventObject) {
          // IE浏览器支持fireEvent方法
          var evt = document.createEventObject();
          return element.fireEvent('on'+event,evt)
      } else {
          // 其他标准浏览器使用dispatchEvent方法
          var evt = document.createEvent( 'HTMLEvents' );
          evt.initEvent(event, true, true);
          return !element.dispatchEvent(evt);
      }
};

document.creatEventObject()是IE创建event对象实例的方法,和document.creatEvent('HTMLEvents')在非IE主流浏览器下的作用相同,fireEvent是IE下的事件触发器,与dispatchEvent在非IE主流浏览器下作用相同。

交流

我是老礼,公众号「进军全栈攻城狮」作者 ,对前端技术保持学习爱好者。我会经常分享自己所学所看的干货,在进阶的路上,共勉!


相关文章
通过python-docx给word文档中的指定位置添加表格
1.读取一个已有的word文档。docx格式。 2.在该word文档中,通过一个给定的文字。找到该位置。在该位置的下方添加一个表格。例如在图中“BUG情况表”的下方插入一个表格
3206 1
通过python-docx给word文档中的指定位置添加表格
|
搜索推荐 JavaScript 前端开发
ESLint 禁止规则出现警告的 5 种方式
ESLint 禁止规则出现警告的 5 种方式
1359 0
|
4月前
|
存储 机器学习/深度学习 自然语言处理
避坑指南:PAI-DLC分布式训练BERT模型的3大性能优化策略
本文基于电商搜索场景下的BERT-Large模型训练优化实践,针对数据供给、通信效率与计算资源利用率三大瓶颈,提出异步IO流水线、梯度压缩+拓扑感知、算子融合+混合精度等策略。实测在128卡V100集群上训练速度提升3.2倍,GPU利用率提升至89.3%,训练成本降低70%。适用于大规模分布式深度学习任务的性能调优。
171 2
|
Java Spring
从@Async案例找到Spring框架的bug:exposeProxy=true不生效原因大剖析+最佳解决方案【享学Spring】(上)
从@Async案例找到Spring框架的bug:exposeProxy=true不生效原因大剖析+最佳解决方案【享学Spring】(上)
|
7月前
|
人工智能 自然语言处理 IDE
Trae 接入 Claude 3.7:AI 编程工具界的“卷王”,完全免费使用!
Trae 是一款完全免费的AI编程工具,现已接入 Claude 3.7 模型,提供代码生成、调试等强大功能,支持多模态输入和上下文理解,用户可享受24小时高速服务,无需担心付费限制。Trae 支持多平台,安装简便,适合开发者快速上手。
2761 1
Trae 接入 Claude 3.7:AI 编程工具界的“卷王”,完全免费使用!
拯救你的排版噩梦,搞定Deepseek到WPS的完美转换!
使用DeepSeek生成的文案复制到WPS后排版混乱?别担心,本文教你用LibreOffice解决此问题。首先下载并安装LibreOffice,然后将DeepSeek文案粘贴其中,保存为Word格式,最后用WPS打开,排版完美保留。简单四步,轻松搞定!
|
11月前
|
移动开发 数据可视化 数据挖掘
利用Python实现数据可视化:以Matplotlib和Seaborn为例
【10月更文挑战第37天】本文旨在引导读者理解并掌握使用Python进行数据可视化的基本方法。通过深入浅出的介绍,我们将探索如何使用两个流行的库——Matplotlib和Seaborn,来创建引人入胜的图表。文章将通过具体示例展示如何从简单的图表开始,逐步过渡到更复杂的可视化技术,帮助初学者构建起强大的数据呈现能力。
|
存储 Shell Linux
【Shell 命令集合 磁盘管理 】Linux 取消挂载 umount命令使用教程
【Shell 命令集合 磁盘管理 】Linux 取消挂载 umount命令使用教程
731 1
|
前端开发 JavaScript
vite中css最佳实践:使用postcss完善项目中的css配置
【8月更文挑战第3天】使用postcss完善项目中的css配置
2985 1