自定義事件

陸斌發(fā)布于2019-08-22 18:15 / 2352人閱讀

摘要：介紹自定義事件之前，首先要介紹一種設(shè)計模式觀察者模式。自定義事件背后的概念是創(chuàng)建一個管理事件的對象，讓其他對象監(jiān)聽這些事件。問自定義事件的認(rèn)知邏輯是什么答咳咳應(yīng)該是觀察者模式吧，能力有限，具體的描述以后補(bǔ)上。

介紹自定義事件之前，首先要介紹一種設(shè)計模式--觀察者模式。

事件是一種叫做觀察者的設(shè)計模式，是一種創(chuàng)建松散耦合代碼的技術(shù)。

觀察者模式有兩類對象組成：主體和觀察者。主體負(fù)責(zé)發(fā)布事件，來表示該對象聲明周期某些有趣的時刻到了；觀察者通過監(jiān)聽這些事件來觀察該主體，等待某些有趣的時刻到來，并運行代碼來響應(yīng)。

該模式的一個關(guān)鍵概念是主體并不知道觀察者的任何事情，也就是說他可以獨立存在并正常運轉(zhuǎn)，即時觀察者不存在。

舉個例子，政府發(fā)布某個文件，下面部門根據(jù)文件執(zhí)行相應(yīng)的任務(wù)。政府為主體，執(zhí)行人為觀察者。但是政府并不知道具體執(zhí)行這件事的人是誰，甚至都不知道是不是有人在執(zhí)行，就好像政府讓下面的人對老城區(qū)拆遷改造但是并不知道他們會強(qiáng)拆一樣，但這并不影響政府發(fā)布文件。

涉及到DOM上，DOM元素便是主體，你的事件處理程序（即回調(diào)函數(shù)）便是觀察者。

自定義事件背后的概念是創(chuàng)建一個管理事件的對象，讓其他對象監(jiān)聽這些事件。具體步驟如下：

定義事件管理對象的構(gòu)造函數(shù)--EventTarget,EventTarget類型有一個屬性和三個方法：

屬性--handlers:用于存儲事件處理程序

方法1--addHandler():用于對給定事件類型注冊事件處理程序

方法2--fire(): 用于觸發(fā)給定事件

方法3--removeEvent():用于注銷給定事件類型的事件處理程序

創(chuàng)建一個EventTarget類型的事件管理對象

通過addHandler()添加一個事件管理程序

通過fire()激發(fā)該事件

通過removeEvent()注銷該事件

代碼如下：

//定義事件管理對象的構(gòu)造函數(shù)--`EventTarget`
function EventTarget(){
    this.handlers = {};
}
EventTarget.prototype = {
    constructor:EventTarget,
    
    /*
    用于對給定事件類型注冊事件處理程序
    param:事件類型--type;用于處理該事件的函數(shù)--handler
    
    */
    addHandler:function(type,handler){
        if(typeof this.handlers[type] == "undefined"){//若不存在針對該事件的數(shù)組，則創(chuàng)建一個新數(shù)組
            this.handlers[type] = [];
        }
        this.handlers[type].push(handler);//將處理程序添加到數(shù)組中，同一事件可以有多個事件處理程序
    },
    
    /*
    用于觸發(fā)給定事件
    param:{} 至少包含type屬性
    
    */
    fire:function(event){
        if(!event.target){
            event.target = this;
        }
        if(this.handlers[event.type] instanceof Array){
            var handlers = this.handlers[event.type];
            for(var i = 0; i < handlers.length; i++){
                handlers[i](event);
            }
        }
    },
    
    /*
    用于注銷給定事件類型的事件處理程序
    param:事件類型--type;用于處理該事件的函數(shù)--handler
    
    */
    removeHandler:function(type,handler){
        if(this.handlers[type] instanceof Array){
            var handlers = this.handlers[type];
            for(var i = 0; i < handlers.length; i++){
                if(handlers[i] === handler){
                    break;
                }
            }
            handlers.splice(i,1);
        }
    }  
};
function handleMessage(event){
    alert("Message received:" + event.message);
}
//創(chuàng)建事件管理對象
var target = new EventTarget();
//添加事件執(zhí)行程序
target.addHandler("message",handleMessage);
//觸發(fā)message事件
target.fire({type:"message",message:"Hello World"});//Message received:Hello World
//注銷事件執(zhí)行程序
target.removeHandler("message",handleMessage);
//再次觸發(fā)message事件
target.fire({type:"message",message:"Hello World"});//無警告框

思考:

寧向東老師在得到專欄說過：相比于認(rèn)知能力，擁有知識的數(shù)量的多少，并不重要，真正重要的是在學(xué)習(xí)一門知識的同時，要格外的在意這些知識所傳達(dá)出來的認(rèn)知邏輯。問：自定義事件的認(rèn)知邏輯是什么？
答：咳咳...應(yīng)該是觀察者模式吧，能力有限，具體的描述以后補(bǔ)上。

若理解有誤，敬請斧正
詳情請見js高程第22章--高級技巧