在学习目标事件的方法的时候,接触到了dispatchEvent()方法。度娘查一查,这是一个事件触发器,事件触发器其实就是触发事件的东西。

  通常情况下,我们触发事件都是在交互中触发的事件,例如点击按钮(click)、提交表单(submit)等。但是有的情况下,事件触发只能由程序来完成,例如ajax框架的一些自定义事件。

  基本上dispatchEvent()方法用于触发自定义事件,自定义事件使用createEvent()创建事件对象,使用initEvent()初始化事件对象。

  让我们照着我写的一个例子去了解一下自定义事件用到的这三个方法吧:

 <script type="text/javascript">
/* 创建一个事件对象,名字为newEvent,类型为HTMLEvent */
var newEvent = document.createEvent("HTMLEvents"); /*
* 实例化创建好的事件对象
* 第一个参数:事件类型(就好像是click还是submit)
* 第二个参数:是否冒泡
* 第三个参数:是否阻止浏览器默认行为(例如阻止submit事件提交表单)
*/
newEvent.initEvent("myEvent",true,true); /* 给自定义事件对象的属性赋值。这个属性一开始不存在,我们这里将其实例化了 */
newEvent.name = "THis is Name"; /*
* 将自定义事件绑定在document上,你也可以绑定到指定元素上。
* 这里要注意:第一个参数要和上面initEvent()的第一个参数一致,否则无法触发这个事件以及获取newEvent中的一些属性(比如这里的newEvent.name)。
*/
document.addEventListener("myEvent",function() {
alert("自定义事件的name属性:" + newEvent.name);
},false); /* 触发自定义事件 */
document.dispatchEvent(newEvent);
</script>

  这个时候启动文档的时候因为 "document.dispatchEvent(newEvent);" 的原因,会触发一次事件:

  

  之后只要我们在控制台中输入document.dispatchEvent(newEvent)都会触发这个函数,并且返回true(你也可以写个函数,里面有这条代码,然后触发啥事件就触发自定义事件):

  

  下面我们一个个介绍这三个方法。

createEvent()——创建自定义对象

  

  该方法创建一个指定类型的事件,返回的对象必须先初始化(比如使用initEvent())后才可以使用dispachEvent()去触发。

  var eventObject = careateEvent(type);

  type:创建事件对象的类型,可以创建"UIEvents"(UI事件,用于触摸屏设备)、"MouseEvents"(鼠标事件)、"MutationEvents"(DOM结构发生改变触发的事件)、"HTMLEvents"(HTML事件?机翻英文文档看不懂。。。),在这里得知以前还可以指定类型为"Event"。

initEvent()——初始化自定义事件对象

  initEvent()用于初始化自定义事件,但据MDN所说,已从Web标准中删除,可能在未来会删除这个方法。

  那以后我想要自定义事件怎么办呢?在MDN中有提到另一种方法,这里就不介绍了,晚些时候再另写一篇介绍另一种方式也就是DOM L4事件构造函数(名字我也是看到这篇文章才知道的)

  那咱先来看看这个未来会删除的这个方法的语法吧:

  event.initEvent(type, bubbles, cancalable);

  type:初始化事件对象的类型,传递一个字符串类型的参数。这里的事件类型指的是类似点击事件(click)、加载事件(load)、提交事件(submit)等等这种类型,当然你也可以自定义一个名字,这样用户就不能通过交互去触发这个事件了。如果你这里设置的是"click",初始化后你也可以通过点击去触发这个事件。

     在绑定事件的时候要注意:绑定事件的事件类型(addEventListener()的第一个参数)要和这个事件类型一致,不然无法触发事件。

  bubbles:该事件是否会冒泡,传递一个布尔型的参数。设置为true表示该事件支持冒泡,为false表示不支持冒泡。设置该参数会影响到Event.bubbles(事件是否支持冒泡)的值。

  cancalable:该事件的默认动作是否可以取消,传递一个布尔型的参数。设置为true表示可以取消默认动作,为false表示不可以取消默认动作。设置该参数会影响到Event.cancalable(是否可以取消默认行为)的值。

dispachEvent()——触发自定义事件

  initEvent()用于触发自定义事件,也就是自定义事件触发器。如果你initEvent()的type参数传递的是你自己定义的事件类型,无法通过用户交互触发,那么就就可以使用这个方法触发。

  dispacheEvent()的语法如下(我改了一下,不是MDN上写的那样,改后的版本适合我自己理解):

  target.dispachEvent(event);

  target:绑定自定义事件的对象,比如我把这个事件通过addEventListener()绑定在一个<p>元素上,那么target就指向这个<p>元素。

  event:要触发的事件对象,这里就是我们自己创建的事件对象了。例如我们这样创建自定义对象:"var myEvent = createrEvent('Event');",那么这里就写myEvent。

  注意:dispachEvent()会返回一个Boolean(布尔)值,如果这个这个事件绑定的函数中有Event.preventDefault()返回false(MDN中说Event.cancalable要为false才行,可是我测试为true的时候有preventDefault()会返回false,Event.cancalable为false有没有preventDefault()都会返回true)。其它情况返回true。

  至于自定义事件的用途嘛。。。我看大家都说在AJAX中可能会用到自定义事件,但我在写这篇笔记的时候(2019-02-15)还没开始学习AJAX,也不知道在AJAX中如何使用,先这样啦,等看完这部分内容再去看AJAX的教程啦。


参考资料:

MDN - Document.createEvent():https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createEvent

MDN - Event.initEvent():https://developer.mozilla.org/zh-CN/docs/Web/API/Event/initEvent

MDN - 创建和触发events:https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events

MDN - EventTarget.dispachEvent():https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/dispatchEvent

简书 - 创建事件(new Event) - 作者:Hushaby、:https://www.jianshu.com/p/47c84ebf0d26

JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()的更多相关文章

  1. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  2. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  3. javascript 自定义事件 发布-订阅 模式 Event

    * javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...

  4. javascript:自定义事件初探

    javascript:自定义事件初探   http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html

  5. Javascript自定义事件功能与用法实例分析

    原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...

  6. JavaScript自定义事件,动态添加属性

    根据事件的不同,可用的自定义方法也不同. document.createEvent('Event'); 实现主要有4个步骤: 1.创建事件. 2.初始化事件(三个参数:事件名,是否起泡,是否取消默认触 ...

  7. JavaScript自定义事件

    很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...

  8. Javascript 自定义事件 (custom event)

    Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...

  9. 高级功能:很有用的javascript自定义事件

    之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...

随机推荐

  1. 构建Spring Cloud微服务分布式云架构

    大型企业分布式微服务云架构服务组件 实现模块化.微服务化.原子化.灰度发布.持续集成 commonservice zipkinSpring 日志收集工具包,封装了Dapper和log-based追踪以 ...

  2. 以方法调用的原理解释Ruby中“puts ‘Hello‘”

    这里尽管缺少消息发送所需要的点(.)以及该消息的显示接收者,却依然发送了消息puts并传递了参数“Hello”给一个对象:默认对象self.在程序运行期间,虽然作为self的对象通过特定规则发生改变, ...

  3. RabbitMQ 的安装----Linux环境

    CentOS7  安装RabbitMq 参考------>  https://www.cnblogs.com/liaojie970/p/6138278.html https://www.cnbl ...

  4. Vue语法学习第三课——计算属性

    模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.对于任何复杂逻辑,都应当使用计算属性. <div id="example&qu ...

  5. 移动端调试神器 whistle

    移动端h5页面嵌入的方式多种多样,普通的chrome真机调试功能有时就不能满足要求了. whistle通过设置wifi服务器代理的方式,可以抓包调试所有移动端请求的页面. whistle的github ...

  6. Mac上配置maven+eclipse+spark开发环境

    1.安装jdk 2.下载scala-ide.官网:http://scala-ide.org 3.安装maven 4.在eclipse中,配置maven的安装了路径.偏好设置--->maven-- ...

  7. 马凯军201771010116《面向对象与程序设计Java》第十周学习总结

    一.理论知识学习部分 泛型类的约束与局限性: 不能用基本类型实例化类型参数 运行时类型查询只适用于原始类型 不能抛出也不能捕获泛型类实例 参数化类型的数组不合法 不能实例化类型变量 泛型类的 ...

  8. IPC 简说

    IPC(inter-process communication)进程间通信 多进程分为两种情况 1. 同一个应用,使用android:process属性启动的四大组件 2. 多应用 通过android ...

  9. django + 阿里云云服务器网站搭建

    最近自己用django搭了一个小网站,个人的项目挂在了github上 https://github.com/LOMOoO/tpure 预计是挂在阿里云的云服务器上运行,云服务器买好了,阿里云的域名也买 ...

  10. Python 验证线程是数据共享的

    import os import time from threading import Thread # from multiprocessing import Process #通过对全局变量的修改 ...