DOM3中的自定义事件

Posted 2020-11-22 baimeishaoxia

DOM3级还定义了自定义事件，自定义事件不是由DOM原生触发的，它的目的是让开发人员创建自己的事件。要创建的自定义事件可以由createEvent("CustomEvent"); 返回的对象有一个initCustomEvent（）方法接收如下四个参数。

1. type：字符串，触发的事件类型，自定义。例如 “keyDown”，“selectedChange”;
2. bubble（布尔值）：标示事件是否应该冒泡；
3. cancelable(布尔值)：标示事件是否可以取消；
4. detail（对象）：任意值，保存在event对象的detail属性中；

下面举例： 当点击按钮的时候，一秒钟之后会触发一个id为target的元素的自定义事件myEvent，此自定义事件发生冒泡，依次经过target，wrap和document。
实际例子在这里：https://codepen.io/zhaojianxi...

<div id= wrap>
  <div>
    <div id="target"></div>
  </div>
  <button id=‘btn‘>点击</button>
</div>

　　var e = document.createEvent("CustomEvent");
　　e.initCustomEvent("myEvent",true,false,"hello world!");

       var btn = document.getElementById(‘btn‘);

       btn.addEventListener(‘click‘,function(){
         setTimeout(function(){
           target.dispatchEvent(e)
         },1000)
       })

       var wrap = document.getElementById(‘wrap‘);
       var target = document.getElementById(‘target‘);
       target.addEventListener(‘myEvent‘,function(e){
         console.log(‘target‘,e)
       })
       wrap.addEventListener(‘myEvent‘,function(e){
         console.log(‘wrap‘,e)
       })
       window.addEventListener(‘myEvent‘,function(e){
         console.log(‘window‘,e)
       })