转 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
最新文章
- iOS 隐藏状态栏
- jQuery 追加元素的方法如append、prepend、before,after(转)
- 将 ASP.NET MVC3 Razor 项目部署到虚拟主机中
- ubuntu 开机显示错误:无法应用原保存的显示器配置
- jquery.validate新的写法(jquery.validate1.13.js)
- 使用C#创建winform窗体,修改debugwen文件夹下exe应用程序的默认图标
- poj1236 有向图加边变成强连通图
- TCP与UDP的区别(转)
- Ubuntu14.04下搭建VPN服务
- GCD hdu2588
- Android OpenGL ES 开发(十): 通过GLES20与着色器交互
- Alpha冲刺Day5
- linux下tomcat的https访问
- PHP中empty、isset和is_null的具体区别?
- 1:Javascript的数据类型和相互转换
- ngui项目花屏问题
- 你的网站升级https了吗
- pandas数组和numpy数组在使用索引数组过滤数组时的区别
- Ubuntu 18.04 LTS 安装wine 、exe程序安装和卸载
- spring冲刺第一天
热门文章
- CompressIt
- CodeForces - 1102B Array K-Coloring
- 聊聊select, poll 和 epoll_wait
- Haporxy
- spring cloud系列教程第一篇-介绍
- D. Kefa and Dishes(状压)
- jQuery的相关尺寸获取 - 学习笔记
- 201771030125-王英雪 实验一 软件工程准备一<;构建之法与博客首秀>;
- JPA---Spring-data-JPA---Hibernate
- docker-compose安装rabbitmq集群(主从集群---》镜像集群)