在学习目标事件的方法的时候,接触到了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. php字符串转数组

    下面代码包括了含有中文汉字的字符. function str2arr($str) { $length = mb_strlen($str, 'utf-8'); $array = []; for ($i= ...

  2. Linux服务器管理神器-IPython

    系统管理员的首选,一个很智能的交互式解释器. 一.特性: 1)magic函数:内置了很多函数用来实现各种特性. 2)Tab补全:可以有效地补齐Python语言的模块.方法和类等. 3)源码编辑:可以直 ...

  3. Java ee Turorial Hello1 Hello1.java解析

    package javaeetutorial.hello1; import javax.enterprise.context.RequestScoped;import javax.inject.Nam ...

  4. vsftpd 的端口模式以及端口映射问题

    开个blog ,写一下关于vsftp 端口映射的一些坑 内容繁多,改日再更.

  5. 大数据处理N!(21<N<2000)

    输入: 每行输入1个正整数n,(0<n<1000 000) 输出: 对于每个n,输出n!的(十进制)位数 digit, 和最高位数firstNum.(n!约等于 firstNum * 10 ...

  6. SQL Server DDL

    1:向表中添加字段 Alter table [表名] add [列名] 类型 2:  删除字段 Alter table [表名]  drop column [列名] 3:  修改表中字段类型 (可以修 ...

  7. windows与sql身份登录

    windows身份验证:1.“.”代表本地2.127.0.0.1代表本地3.本地ip地址,在dos中可查4.localhost代表本地 sql身份验证:首先用windows登上去,之后再安全性中找到登 ...

  8. asp.net webapi 生成在线文档--Swagger

    第一步:使用nuget包获取Swashbule.swagger.net.ui的包并安装. 安装成功后 打开App_Start->SwaggerNet.cs 注释掉一下两行 //[assembly ...

  9. Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.java

    Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.jar执行运行jar文件,会出现"no main manifest attribute, in ...

  10. 再见了,我最爱的OI~~~

    唔,迟到了三个月的感言呢. 我就这样离开OI了,成为了一个退役的OIer,当年高一的时候还觉得自己有很多时间,没想转眼间自己就退役了.呵呵,来到OI 从没有在这个世界带起一丝风浪,也没有拿到一个满意的 ...