1、什么是dispatchEvent？

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

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

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

  1. var event = new Event('click');//创建一个click事件
  2. elem.addEventListener('click', function(e){}, false);//为元素绑定事件监听
  3. elem.dispatchEvent(event);//派发事件
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title>test</title>
  5. </head>
  6. <body>
  7. 	<button id="click">Click me!</button>
  8. </body>
  9. 	<script type="text/javascript">
  10. 		window.onload = function(){
  11. 			var btn = document.querySelector('#click');
  12. 			btn.addEventListener('click', function(e){
  13. 				alert('okk!');
  14. 			}, false);
  15. 			var event = new Event('click');
  16. 			btn.dispatchEvent(event);
  17. 		}
  18. 	</script>
  19. </html>

2、运用场景

  • 使用场景

    • 一是触发自定义事件，浏览器自带事件一般由浏览器接收某些操作之后触发，而自定义事件的触发就需要使用dispatchEvent来进行手动触发了。
    • 二是触发浏览器标准事件。根据需求决定，某些操作如果正好与某个元素事件的触发一致，且该事件很好模拟，我们就可以触发该事件来达到某些我们需要的执行结果。

  • 注意事项

    • ie9以下的版本不支持该方法，二是使用fireEvent方法，所以，有需求的话需要做好浏览器兼容。

  • 使用Jquery来兼容浏览器

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

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

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

3、总结

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

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

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

  1. Javascript事件派发-dispatchEvent

    事件派发的作用: 1.派发数据,将一个封闭模块中的数据传递给另一个封闭模块.2.事件完成了较为复杂的解耦. 事件和回调函数不同在于: 1.事件可以在任意地方去获取,而回调函数只能在一个地方存在,如果需 ...

  2. 使用lua实现一个简单的事件派发器

    设计一个简单的事件派发器,个人觉得最重要的一点就是如何保证事件派发过程中,添加或删除同类事件,不影响事件迭代顺序和结果,只要解决这一点,其它都好办. 为了使用pairs遍历函数,重写了pairs(lu ...

  3. Java多线程开发系列之番外篇：事件派发线程---EventDispatchThread

    事件派发线程是java Swing开发中重要的知识点,在安卓app开发中,也是非常重要的一点.今天我们在多线程开发中,穿插进来这个线程.分别从线程的来由.原理和使用方法三个方面来学习事件派发线程. 一 ...

  4. wex5 实战 框架拓展之2 事件派发与data刷新

    一 前言 讲完公共data,相信大家对框架级的data组件级绑定有了更新的认识,接下来我们继续深入,以求研究明白wex5的框架能力. 在一个web项目中,其实有一个data, 是基础框架必须的data ...

  5. [置顶] Android源码分析-点击事件派发机制

    转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/17339857 概述 一直想写篇关于Android事件派发机制的文章,却一直没 ...

  6. JS 事件派发器EventDispatcher

    在Java和AS中经常用到EventDispatcher,写了一个JS版本的. addListener :添加事件监听器 removeListener:移除事件监听器 dispatchEvent:派发 ...

  7. js事件触发器 dispatchEvent()

    [其实就是自动触发事件,而非手动(交互)触发事件] dispatchEvent是作为高级浏览器(如chrome.Firfox等)的事件触发器来使用的,那么什么是事件触发器?就是触发事件的东西.可能有人 ...

  8. Android Touch事件派发流程源码分析

    分native侧事件派发到java侧和Framework派发事件到UI,流程看源码即可,此处不赘叙, Native侧派发事件的干活类图如下:

  9. pyglet模块的EventDispatcher(事件派发对象）

    事件派发对象用于处理事件的派发与响应,pyglet的window对象正是继承了它才具有处理事件的能力. 步骤: 1.注册事件类型: EventDispatcher.register_event_typ ...

随机推荐

  1. 关于Integer比较问题

    public class Test { public static void main(String[] args) { Integer a=127; Integer b=127; System.ou ...

  2. SpringMVC：处理静态资源

    方法1.采用<mvc:default-servlet-handler/> 若将 DispatcherServlet 请求映射配置为 /,则 Spring MVC 将捕获WEB 容器的所有请 ...

  3. 设计模式 — 单例模式（Singleton）

    在一个软件系统中,经常有有些特殊的对象就需要一个实例,如果有多个的话,就比较浪费服务器资源,最典型的就是 整个系统的配置文件对象. 普通方式读取配置文件 // 配置文件 SingletonApp.pr ...

  4. centos下设置开机启动程序

    首先,设置权限, 由于/etc/rc.local是/etc/rc.d/rc.local的软连接,所以必须确保/etc/rc.local和/etc/rc.d/rc.local都有x权限(可执行) 执行命 ...

  5. golang 关于 interface 的学习整理

    Golang-interface(四 反射) go语言学习-reflect反射理解和简单使用 为什么在Go语言中要慎用interface{} golang将interface{}转换为struct g ...

  6. 修改MySQL的数据目录

    环境:CentOS Linux release 7.1.1503 (Core) 1. 安装MYSQL wget http://dev.mysql.com/get/mysql-community-rel ...

  7. Linux密码重置

    在启动菜单选择启动内核: 按e编辑,编辑修改两处:ro改为rw,和找到rhgb quiet一行: 把rhgb quiet替换为init=/bin/bash(临时生效): 按CTRL+X进入单用户模式: ...

  8. canvas20181114

    1. canvas 描边.填充.画线.闭合路径.非零环绕原则 <!DOCTYPE html> <html lang="en"> <head> & ...

  9. RXJS Observable的冷，热和Subject

    一.Observable的冷和热 Observable 热:直播.所有的观察者,无论进来的早还是晚,看到的是同样内容的同样进度,订阅的时候得到的都是最新时刻发送的值. Observable 冷:点播. ...

  10. POJ 1256

    //#include "stdafx.h" #include <stdio.h> #include <string.h> #define N_MAX 14 ...