1. 程式人生 > >js自定義事件模式

js自定義事件模式

ner 例如 ret cti bsp js事件 事件 使用 原型

---恢復內容開始---

  js事件用的最多的就是默認事件。不過有時候需要自定義事件來使用。

  參照默認事件的模式,例如click事件,鼠標點擊dom,先觸發click事件,然後執行dom上的事件處理程序。

<p>點我</p>

document.getElementByTagName(‘p‘)[0].addEventLisener(‘click‘,()=>{

  alert(‘click‘);

})  

  同理,自定義事件也需要三個部分,即事件註冊、事件觸發、處理程序。

這裏使用原型方法做例:

var ZdsEvent=function(){ //自定義事件對象
  return;
};
ZdsEvent.prototype={ //原型對象
  handles:{ //事件處理程序

  },
  on(zdsEvent,handle){ //事件註冊
    if(!this.handles[zdsEvent]){
      this.handles[zdsEvent]=handle;
    }else{
      console.log(‘這個事件已經註冊過了‘);
    };
  },
  emit(zdsEvent){ //事件觸發
    if(this.handles[zdsEvent]){
      this.handles[zdsEvent]();
    }else{
      console.log(‘還沒有註冊這個事件呢‘);
    }
  }
}
var zds=new ZdsEvent(); //實例事件對象
zds.on(‘con‘,()=>{ //註冊一個打印內容事件
  console.log(‘第一個事件‘)
});
zds.emit(‘con‘); //觸發事件

這就是一個自定義事件的最基本模式,還有一些其他的功能,如註銷事件和一次性事件等,不過最基本的功能就是這樣

js自定義事件模式