python⾃定义事件event的含义_⾃定义事件——Event和 CustomEvent
湿电除雾器之前在学习⾃定义事件时，在MDN的Event.initEvent()页⾯顶端有写：该特性已从Web标准中删除，虽然⼀些浏览器⽬前仍然⽀持它，但也许会在未来的某个时间停⽌⽀持，请尽量不要使⽤该特性。
作为替代，我们可以通过创建Event对象和CustomEvent对象来创建⾃定义对象。先从Event()对象开始。
Event()——Event对象的构造函数
咱们可以看着下⾯这个例⼦去了解如何使⽤Event()创建⼀个⾃定义对象：
1
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
启动⽂档的时候因为"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
2 /*创建⼀个事件对象，名字为newEvent，类型为build*/
3 varnewEvent= newCustomEvent('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
启动⽂档的时候因为"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屋面天窗
2 /*创建⼀个事件对象，名字为newEvent，类型为build*/
3 varnewEvent= newCustomEvent('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.dog12 + "\n event.detail.cat:"
+event.detail.cat );13 },false)14
15 /*触发⾃定义事件*/heff
16 document.dispatchEvent(newEvent);17
启动⽂档的时候因为"document.dispatchEvent(newEvent)"的关系，会先触发⼀次事件：
之后你每执⾏⼀次"document.dispatchEvent(newEvent)"都会触发这个事件：
参考资料：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议