转 js自定义事件——Event和CustomEvent

Posted xiaozhang666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了转 js自定义事件——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

 

以上是关于转 js自定义事件——Event和CustomEvent的主要内容,如果未能解决你的问题,请参考以下文章

js事件Event对象(自定义事件对象 CustomEvent)

js事件Event对象(自定义事件对象 CustomEvent)

js自定义事件

js自定义事件

JS中自定义事件的使用与触发

mui.fire()触发自定义事件