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

Posted 2021-02-09 苏帕

 

　　在学习目标事件的方法的时候，接触到了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的教程啦。

 

---

参考资料：

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