JavaScript自定义事件 - createEvent()、initEvent()和dispachEvent()

参考资料:

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



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

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

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

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

 1 <script type="text/javascript">
 2     /* 创建一个事件对象,名字为newEvent,类型为HTMLEvent */
 3     var newEvent = document.createEvent("HTMLEvents");
 4
 5     /*
 6      * 实例化创建好的事件对象
 7      * 第一个参数:事件类型(就好像是click还是submit)
 8      * 第二个参数:是否冒泡
 9      * 第三个参数:是否阻止浏览器默认行为(例如阻止submit事件提交表单)
10      */
11     newEvent.initEvent("myEvent",true,true);
12
13     /* 给自定义事件对象的属性赋值。这个属性一开始不存在,我们这里将其实例化了 */
14     newEvent.name = "THis is Name";
15
16     /*
17      * 将自定义事件绑定在document上,你也可以绑定到指定元素上。
18      * 这里要注意:第一个参数要和上面initEvent()的第一个参数一致,否则无法触发这个事件以及获取newEvent中的一些属性(比如这里的newEvent.name)。
19      */
20     document.addEventListener("myEvent",function() {
21         alert("自定义事件的name属性:" + newEvent.name);
22     },false);
23
24     /* 触发自定义事件 */
25     document.dispatchEvent(newEvent);
26 </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的教程啦。

原文地址:https://www.cnblogs.com/cwsb/p/10375983.html

时间: 2024-10-11 22:10:51

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

JavaScript 自定义事件

Javascript事件模型系列(四)我所理解的javascript自定义事件 漫谈js自定义事件.DOM/伪DOM自定义事件

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

根据事件的不同,可用的自定义方法也不同. document.createEvent('Event'); 实现主要有4个步骤: 1.创建事件. 2.初始化事件(三个参数:事件名,是否起泡,是否取消默认触发) 3.监听事件 4.触发事件 var Evt = document.createEvent('Event');//创建一个事件 Evt.initEvent('inputChangeEvt', true, true);//初始化事件,给定事件名字 window.addEventListener('

Javascript 自定义事件 (custom event)

Javascript 中经常会用到自定义事件.如何创建一个简单的自定义事件呢?在创建自定义的事件之前,我们应该考虑一下和事件有关的东西.例如 click 事件,首先我们要能注册一个click事件(在一个button上绑定click事件),然后要能够触发这个事件,最后事件不需要的时候要能够移除事件. 我们可以借助JQuery 的方法来实现自定义事件,请看下面的例子: <div id="myDiv">myDiv</div> <script type="

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

之前写了篇文章<原生javascript实现类似jquery on方法的行为监听>比较浅显,能够简单的使用场景. 这里的自定义事件指的是区别javascript默认的与DOM交互的事件,比如click,mouseover,change等,有时候我们需要监听某一行为是否发生,很显然默认的行为不够用,比如一个场景.我们写好了tab切换,点击后请求加载隐藏标签的内容. tab切换是非常常用的一个功能,通常会写成组件,如果每次把请求写在组件里肯定对组件拓展和耦合性有影响.这时候我们可以在组件里自定义一

JavaScript 自定义事件而不用 MVC 者,都是耍流氓

自定义事件这事儿,得用 MVC. 宝宝和我说,凡是写事件不用 MVC 者,都是耍流氓.我对此深以为然. 其实宝宝只说过后半句. 事件这玩意儿,从实现上来说,需要实现委托注册管理和事件触发回调这两块:从定义上来说,需要由事件服务定义委托管理和事件触发,由事件监听者定义委托注册和事件回调:从角色划分来说,需要分为服务者.触发者.监听者.这套排列组合,你已经乱了是吧.所以说,事件长得是这德性的: // 服务者 public delegate void EventHandler(object sende

JavaScript自定义事件监听

一.事件的属性和方法 1 //事件Event 2 //属性:` 3 `bubbles`:布尔值,是否会冒泡 4 `cancelable`:布尔值,是否可以取消默认动作 5 `target`:目标对象 6 `currentTarget`:当前对象 7 `timeStamp`:时间戳(相对于某个时刻) 8 `type`:事件类型,即注册该事件的名字 9 `eventPhase`:返回事件传播的当前阶段 10 11 12 //方法 13 1.event.stopPropagation(); 阻止冒泡

JavaScript自定义事件和触发(createEvent, dispatchEvent)

$(dom).addEvent("ft", function() { alert("走起"); }); // 创建 var evt = document.createEvent("HTMLEvents"); // 初始化 evt.initEvent("ft", false, false); // 触发, 即弹出文字 dom.dispatchEvent(evt); //type:HTMLEvents MouseEvents(也可

Javascript自定义事件

触发用户自定义事件,已成为各前端框架的基本技术.(较新版本的浏览器才支持) 页面 <div id="outer"> <div id="inner">Leonardo Da Vinci</div> </div> <button onclick="tiggerMyEvent();">触发事件</button> 脚本 document.querySelector("#ou

javascript事件之:谈谈自定义事件(转)

http://www.cnblogs.com/pfzeng/p/4162951.html 对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候.给需要懒加载的图片定义一个appear事件.当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只触发一次). 由此,现在我们通过JavaScript谈一谈自定义事件. 所谓事件,说的明白点,就是在一个合适的时候触发调用某个函数.平常说的事件是那些比较常用的,绑定在元素身上的某个方法,当用户触发某个行为时,