自定义事件——Event和CustomEvent

 

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

　　作为替代，我们可以通过创建Event对象和CustomEvent对象来创建自定义对象。先从Event()对象开始。

　　

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

　　

　　咱们可以看着下面这个例子去了解如何使用Event()创建一个自定义对象：

<script type="text/javascript">  
    /* 创建一个事件对象，名字为newEvent，类型为build */
    var newEvent = new Event('build', { bubbles:true,cancelable:true,composed:true });
        
    /* 给这个事件对象创建一个属性并赋值 */
    newEvent.name = "新的事件！";
    
    /* 将自定义事件绑定在document对象上，这里绑定的事件要和我们创建的事件类型相同，不然无法触发 */
    document.addEventListener("build",function(){
        alert("你触发了自定义事件！" + newEvent.name);
    },false)
        
    /* 触发自定义事件 */
    document.dispatchEvent(newEvent);  
</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）：

<script type="text/javascript">  
    /* 创建一个事件对象，名字为newEvent，类型为build */
    var newEvent = new CustomEvent('build', { bubbles:true,cancelable:true,composed:true });
    
    /* 给这个事件对象创建一个属性并赋值，这里绑定的事件要和我们创建的事件类型相同，不然无法触发 */
    newEvent.name = "新的事件！";
    
    /* 将自定义事件绑定在document对象上 */
    document.addEventListener("build",function(){
        alert("你触发了使用CustomEvent创建的自定义事件！" + newEvent.name);
    },false)
        
    /* 触发自定义事件 */
    document.dispatchEvent(newEvent);  
</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字典中的参数了）：

<script type="text/javascript">  
    /* 创建一个事件对象，名字为newEvent，类型为build */
    var newEvent = new CustomEvent('build',{ 
        detail: {
            dog:"wo",cat:"mio"
        }
    });
    
    /* 将自定义事件绑定在document对象上 */
    document.addEventListener("build",function(){
        alert(" event.detail.dog:" + event.detail.dog
         + "\n event.detail.cat:" + event.detail.cat );
    },false)
    
    /* 触发自定义事件 */
    document.dispatchEvent(newEvent);  
</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