自定義事件

事件是一個觀察者模式,即由主體(DOM元素)和觀察者(事件處理代碼)組成,主體可以脫離觀察者單獨存在,觀察者知道主體并能注冊事件的回調函數。
下面是自定義事件的基本模式:

function EventTarget () {
    this.handlers = {};     // 對象屬性,有三個方法
    // this.handlers = {
        // type1 : [type1Fun1, type1Fun2],
        // type2 : [type2Fun1, type2Fun2]
    // }
}
EventTarget.prototype = {
    constructor : EventTarget,
    /**綁定事件
    * param type : 自定義事件類型
    * param handler : 自定義事件綁定的回調函數
    */
    addHandler : function (type, handler) {
        // 如果傳入的事件類型為undefined,就創建一個數組
        if (typeof this.handlers[type] == "undefined") {
            this.handlers[type] = [];
        }
        // 再將回調函數添加到數組中去
        this.handlers[type].push(handler);
    },
    /**觸發事件
    * param event : 傳入的對象
    * { type : "show", message : "hello world"}
    */
    fire : function (event) {
        // alert(event.target);                     // undefined
        // alert(this instanceof EventTarget);      // true
        // alert(Object.prototype.toString.call(this)); // [object Object]
        if (!event.target) {
            event.target = this;
        }
        if (this.handlers[event.type] instanceof Array) {
            var handlers = this.handlers[event.type];
            // alert(handlers);
            // alert(event.type);       // message
            // alert(handlers.length);      // 1
            // alert(handlers[0]);      
            for (var i = 0, len = handlers.length; i < len; i++) {
                handlers[i](event);         // 調用對應事件的回調函數
            }
        } else {
            throw new Error("No event can call");
        }
    },
    /**注銷事件的回調函數
    * param type : 事件類型
    * param handler : 回調函數
    * 調用示例:removeHanlder("show", showMessage);
    * 注銷show類型的showMessage函數
    **/
    removeHandler : function (type, handler) {
        if (this.handlers[type] instanceof Array) {
            var handlers = this.handlers[type];     // 取得對應事件的回調函數
            for (var i = 0, len = handlers.length; i < len; i++) {
                if (handlers[i] == handler) {
                    break;      // 得到對應事件的索引值
                }
            }
            handlers.splice(i, 1);      // 刪除索引值,即刪除對應的事件的其中一個回調函數
        }
    }
}
function handleMessage(event){
    alert("接受的信息: " + event.message);
}
function showMessage(event){
    alert("展示的信息: " + event.message);
}
var eventTarget = new EventTarget();
eventTarget.addHandler("message", handleMessage);           // 注冊message類型的handleMessage
eventTarget.addHandler("show", showMessage);                // 注冊show類型的showMessage
eventTarget.fire({ type : "message", message : "hello"});   // 觸發message類型的handleMessage,
eventTarget.fire({ type : "show", message : "world"});      // 觸發show類型的showMessage
eventTarget.removeHandler("show", showMessage);             // 解除message類型的handleMessage
eventTarget.fire({ type : "message", message : "hello"});   // 觸發message類型的handleMessage
eventTarget.fire({ type : "show", message : "world"});      // 觸發show類型的showMessage
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容