事件派发dispatchEvent

1、什么是`dispatchEvent`？

dispatch意为“调度”、“派遣”，event为“事件”。所以dispatchEvent即向指定事件目标派发一个事件，并以合适的顺序触发受影响的事件目标。

简单来说就是，一般的事件触发都是用户进行某些操作时才会触发，而使用dispatchEvent就可以在代码中手动触发事件了。

下面是一个简单的创建并派发事件的例子：

var event = new Event('click');//创建一个click事件

elem.addEventListener('click', function(e){}, false);//为元素绑定事件监听

elem.dispatchEvent(event);//派发事件

<!DOCTYPE html>

<html>

<head>

	<title>test</title>

</head>

<body>

	<button id="click">Click me!</button>

</body>

	<script type="text/javascript">

		window.onload = function(){

			var btn = document.querySelector('#click');

			btn.addEventListener('click', function(e){

				alert('okk!');

			}, false);

			var event = new Event('click');

			btn.dispatchEvent(event);

		}

	</script>

</html>

2、运用场景

使用场景
- 一是触发自定义事件，浏览器自带事件一般由浏览器接收某些操作之后触发，而自定义事件的触发就需要使用dispatchEvent来进行手动触发了。
- 二是触发浏览器标准事件。根据需求决定，某些操作如果正好与某个元素事件的触发一致，且该事件很好模拟，我们就可以触发该事件来达到某些我们需要的执行结果。
注意事项
- ie9以下的版本不支持该方法，二是使用fireEvent方法，所以，有需求的话需要做好浏览器兼容。
使用Jquery来兼容浏览器

Jquery中的trigger方法就是用来触发事件的。

$(selector).trigger(event,[param1,param2,...])//规定指定元素要触发的事件，字符串

$(selector).trigger(eventObj)//eventObj派发的事件对象

3、总结

事件除了浏览器自动监，我们还可以手动触发事件，也就是使用dispatchEvent。

但是我们定义事件的目的就是为了执行某一方法，所以我们手动触发事件的目的其实也是想要执行该事件下影响到的方法。有时候不只是一个方法，且执行顺序也有所区别，这个时候调用方法不如直接触发事件方便，但是方便的同时也会有某些我们不希望触发函数的隐患。

事件派发dispatchEvent的更多相关文章

Javascript事件派发-dispatchEvent
事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...
使用lua实现一个简单的事件派发器
设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...
Java多线程开发系列之番外篇：事件派发线程---EventDispatchThread
事件派发线程是java Swing开发中重要的知识点,在安卓app开发中,也是非常重要的一点.今天我们在多线程开发中,穿插进来这个线程.分别从线程的来由.原理和使用方法三个方面来学习事件派发线程. 一 ...
wex5 实战框架拓展之2 事件派发与data刷新
一前言讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...
[置顶] Android源码分析-点击事件派发机制
转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/17339857 概述一直想写篇关于Android事件派发机制的文章,却一直没 ...
JS 事件派发器EventDispatcher
在Java和AS中经常用到EventDispatcher,写了一个JS版本的. addListener :添加事件监听器 removeListener:移除事件监听器 dispatchEvent:派发 ...
js事件触发器 dispatchEvent()
[其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...
Android Touch事件派发流程源码分析
分native侧事件派发到java侧和Framework派发事件到UI,流程看源码即可,此处不赘叙, Native侧派发事件的干活类图如下:
pyglet模块的EventDispatcher(事件派发对象）
事件派发对象用于处理事件的派发与响应,pyglet的window对象正是继承了它才具有处理事件的能力. 步骤: 1.注册事件类型: EventDispatcher.register_event_typ ...

随机推荐

CSS 屏幕大小自适应
要想实现css屏幕大小自适应,首先得引入 CSS3 @media 媒体查询器: media的使用和规则: ①被链接文档将显示在什么设备上. ②用于为不同的媒介类型规定不同的样式. 语法: @medi ...
Nginx配置详解(转)
转自:Nginx简介及配置文件详解一 Nginx简介 Nginx是一款开源代码的高性能HTTP服务器和反向代理服务器,同时支持IMAP/POP3/SMTP代理服务 1.Nginx工作原理 Nginx ...
BLO（bzoj1123）
Description Byteotia城市有n个 towns, m条双向roads. 每条 road 连接两个不同的 towns ,没有重复的road. 所有towns连通. Input 输入n和 ...
Hive 2.1.1 学习笔记
1.修改conf下的配置文件cp -a hive-default.xml.template hive-site.xml2.进入bin目录启动hive./hive 报错Exception in thre ...
vue修改项目名
1.修改config/index.js文件 2.修改Router内容 vue跨域设置
IE下get方式传中文参数乱码解决方法
乱码原因:浏览器在传递url的时候,会使用自己的编码格式对地址进行编码,如果浏览器所使用编码与服务器采用编码不一致,服务器接收到的参数就会出现乱码.在firefox,chrome下正常,ie下会出现乱 ...
基于Filebeat+Kafka+Flink仿天猫双11实时交易额
1. 写在前面在大数据实时计算方向,天猫双11的实时交易额是最具权威性的,当然技术架构也是相当复杂的,不是本篇博客的简单实现,因为天猫双11的数据是多维度多系统,实时粒度更微小的.当然在技术的总体架 ...
ASP.NET Core快速入门学习笔记（第1章：介绍与引入）
课程链接:http://video.jessetalk.cn/course/explore 良心课程,大家一起来学习哈! 任务1:课程介绍任务2:环境安装下载地址:https://dotnet.m ...
restful规范简要概述
在 RESTful 架构概念详解中聊了一些概念和约束, 本篇主要简要的聊一聊 RESTful API 规范概要设计, 内容源自阮一峰老师的博客一. 协议(protocol) 服务端的 API 与 ...
开发自己的react-native组件并发布到npm[转]
原文链接:https://www.jianshu.com/p/091a68ea1ca7 写在前面在做react-native开发的时候,我们经常会找到一些第三方组件,并且通过npm install的 ...