DOM3中的自定義事宜

2024年1月16日 146次阅读 来源: jessezhao1990

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞