自定义事件——Event和CustomEvent

 

　　以前在学习自定义事件时，在MDN的Event.initEvent()页面顶端有写：该特性已从Web标准中删除，虽然一些浏览器目前仍然支持它，但也许会在将来的某个时间中止支持，请尽可能不要使用该特性。

　　做为替代，咱们能够经过建立Event对象和CustomEvent对象来建立自定义对象。先从Event()对象开始。

　　

Event()——Event对象的构造函数

　　

　　我们能够看着下面这个例子去了解如何使用Event()建立一个自定义对象：

 1 <script type="text/javascript">  
 2     /* 建立一个事件对象，名字为newEvent，类型为build */
 3     var newEvent = new Event('build', { bubbles:true,cancelable:true,composed:true });
 4         
 5     /* 给这个事件对象建立一个属性并赋值 */
 6     newEvent.name = "新的事件！";
 7     
 8     /* 将自定义事件绑定在document对象上，这里绑定的事件要和咱们建立的事件类型相同，否则没法触发 */
 9     document.addEventListener("build",function(){
10         alert("你触发了自定义事件！" + newEvent.name);
11     },false)
12         
13     /* 触发自定义事件 */
14     document.dispatchEvent(newEvent);  
15 </script>    

　　启动文档的时候由于"document.dispatchEvent(newEvent)"的关系，会先触发一次事件：

　　

　　以后你每执行一次"document.dispatchEvent(newEvent)"都会触发这个事件：

　　

　　好，接下来咱们看看Event()这个方法的语法把（disapthEvent()在个人另外一个笔记里有介绍，这里就再也不次介绍了）：

　　event = new Event(typeArg, eventInit);

　　typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。

　　eventInit：可选，传递EventInit类型的字典。实际上这个EventInit类型的字典也就是咱们使用InitEvent()时须要传递的参数，以键值对的形式传递，不过它能够多选一个参数：

　　　　bubbles：事件是否支持冒泡，传递一个boolean类型的参数，默认值为false。

　　　　cancelable：是否可取消事件的默认行为，传递一个boolean类型的参数，默认值为false。

　　　　composed：事件是否会触发shadow DOM（阴影DOM）根节点以外的事件监听器，传递一个boolean类型的参数，默认值为false。（关于shadow DOM能够去看ChokCoco前辈的这篇文章，这里就不详说了，可能我会根据本身的理解也写一个关于shadow DOM的笔记）这个参数是InitEvent()中没有的新参数。

　　

　　用法其实和使用createEvent()结合initEvent()差很少，不过Event()不支持IE浏览器，因此怎么使用仍是得看我们。

　　

CustomEvent()——CustomEvent对象的构造函数

 

　　CustomEvent()能够像Event()那样赋值，但它能够在Web Workers中使用（与主线程分离的另外一个线程），能够传递跟事件关联的相关值（detail）。（但我贼Event()中没看到又说可不可使用Web Workers，写完这个去查查）

　　咱们先经过下面的例子了解一下如何使用CustomEvent()去建立一个事件对象（这里先不使用事件相关值detail）：

 1 <script type="text/javascript">  
 2     /* 建立一个事件对象，名字为newEvent，类型为build */
 3     var newEvent = new CustomEvent('build', { bubbles:true,cancelable:true,composed:true });
 4     
 5     /* 给这个事件对象建立一个属性并赋值，这里绑定的事件要和咱们建立的事件类型相同，否则没法触发 */
 6     newEvent.name = "新的事件！";
 7     
 8     /* 将自定义事件绑定在document对象上 */
 9     document.addEventListener("build",function(){
10         alert("你触发了使用CustomEvent建立的自定义事件！" + newEvent.name);
11     },false)
12         
13     /* 触发自定义事件 */
14     document.dispatchEvent(newEvent);  
15 </script>  

　　启动文档的时候由于"document.dispatchEvent(newEvent)"的关系，会先触发一次事件：

 

　　以后你每执行一次"document.dispatchEvent(newEvent)"都会触发这个事件：

　　

　　而后咱们来看CustomEvent()的语法：

　　event = new CustomEvent(typeArg, customEventInit);

　　typeArg：指定事件类型，传递一个字符串。这里的事件类型指的是像点击事件（click）、提交事件（submit）、加载事件（load）等等。

　　customEventInit：可选。传递一个CustomEventInit字典。实际上这个字典就是咱们使用initCustomEvent()时须要的参数，这个参数就是事件相关值（detail）：

　　　　detail：可选，默认值为null，类型为any（也就是说能够传递任意类型的参数）。这个值就是和事件相关联的值。

　　在展现使用detail做为第二个参数的例子前，要先注意一件事：CustomEventInit字典也能够接受EventInit字典的参数，就像一开始的例子同样，我传递了EventInit字典的bubbles、cancelable、composed。

　　下面将展现使用detail参数的例子，使用到detail的部分我会加粗处理（为了看着方便，这回就不传递EventInit字典中的参数了）：

 1 <script type="text/javascript">  
 2     /* 建立一个事件对象，名字为newEvent，类型为build */
 3     var newEvent = new CustomEvent('build',{  4  detail: {  5  dog:"wo",cat:"mio"
 6  }  7     });
 8     
 9     /* 将自定义事件绑定在document对象上 */
10     document.addEventListener("build",function(){
11         alert(" event.detail.dog:" + event.detail.dog 12          + "\n event.detail.cat:" + event.detail.cat );
13     },false)
14     
15     /* 触发自定义事件 */
16     document.dispatchEvent(newEvent);  
17 </script>  

　　启动文档的时候由于"document.dispatchEvent(newEvent)"的关系，会先触发一次事件：

　　

　　以后你每执行一次"document.dispatchEvent(newEvent)"都会触发这个事件：

　　

　　

---

参考资料：

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

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

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

MDN - CustomEvent.initCustomEvent()：https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/initCustomEvent

MDN - CustomEvent.detail：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/detail