js自訂事件模式

標籤：add   執行個體   註冊   功能   dom   觸發事件   function   需要   沒有   

---恢複內容開始---

　　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自訂事件模式