DOM3中的自定义事件

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)
       })
    原文作者:jessezhao1990
    原文地址: https://segmentfault.com/a/1190000014753794
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞