JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()
在学习目标事件的方法的时候,接触到了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()的更多相关文章
- Javascript事件模型系列(四)我所理解的javascript自定义事件
被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...
- 理解的javascript自定义事件
理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...
- javascript 自定义事件 发布-订阅 模式 Event
* javascript自定义事件 var myEvent = document.createEvent("Event"); myEvent.initEvent("myE ...
- javascript:自定义事件初探
javascript:自定义事件初探 http://www.cnblogs.com/jeffwongishandsome/archive/2008/10/27/1317148.html
- Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述 自定义事件很难 ...
- JavaScript自定义事件,动态添加属性
根据事件的不同,可用的自定义方法也不同. document.createEvent('Event'); 实现主要有4个步骤: 1.创建事件. 2.初始化事件(三个参数:事件名,是否起泡,是否取消默认触 ...
- JavaScript自定义事件
很多DOM对象都有原生的事件支持,向div就有click.mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会.随着web技术发展,使用JavaScript自定 ...
- Javascript 自定义事件 (custom event)
Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一 ...
- 高级功能:很有用的javascript自定义事件
之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比 ...
随机推荐
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
- java基础知识—数组
1.数组:是一个变量,存储相同数据类型的一组数据. 2.数据的优点:减少代码量.易查找. 3.数组的使用步骤: 1)声明数组:int scores []: 2)开辟空间:scores = new in ...
- flask 登录验证码 字母和数字
captcha.py #!/usr/bin/env python# -*- coding: utf-8 -*- # refer to `https://bitbucket.org/akorn/whee ...
- echarts设置option中的数据对象优化
if(tab.name == 'first'){ myChart.setOption({ legend: { selected:{ [this.playNumber]:true, [this.cove ...
- python 第三方库 dateutil.parser 使用说明
dateutil.parser 顾名思意 就是与日期相关库里的一个日期解析器 能够将字符串 转换为日期格式 我们来看看具体的用法 首先 需要在线安装 pip install python-dateut ...
- [Java concurrent][Collections]
同步容器类 同步容器类包括Vector和Hashtable,二者是早期JDK的一部分.以及一些在JDK1.2中添加的可以由Collections.synchronizedXxx等工厂方法创建的. 这些 ...
- Shell 命令替换
1.命令替换,有两种方式 方式一:`command` 方式二:$(command) 2.应用场景 在命令中通过命令替换的方式,将某些子命令的结果嵌入到当前命令中. 3.举例 例1: 获取系统所用用户并 ...
- gulp的使用(二)之gulpfile.js文件的配置
Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...
- erlang开发工具之intellij idea基本使用
其他废话就不多说了,接下来主要是介绍怎么来用idea搭建项目让我们能更好的使用好开发工具. (这边假设你已经下载好了intellij idea关于erlang的插件,如果没有安装好,请先去google ...
- HTML标记语言
一.html的文档结构 html含义为超文本标记语言,html文档重要由4个标签来组成就是<html> <head> <title> <body> ...