摘要：這種解決方式也是相當(dāng)優(yōu)雅，值得學(xué)習(xí)源碼解析系列源碼解析一準(zhǔn)備工作源碼解析二函數(shù)源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址

我們在使用 vue 的時候，相信你一定也會對事件的處理比較感興趣。 我們通過 @click 的時候，到底是發(fā)生了什么呢！

雖然我們用 @click綁定在模板上，不過事件嚴格綁定在 vnode 上的 。

eventlisteners 這個模塊，就是定義了一些鉤子，在 patch 的時候，能夠進行事件的綁定以及解綁。

建議閱讀這個篇章之前，先閱讀 模塊 了解簡單的模塊之后，再回來

首先我們看下暴露出來的內(nèi)容：

// 導(dǎo)出時間監(jiān)聽模塊，創(chuàng)建、更新、銷毀
export const eventListenersModule = {
    create: updateEventListeners,
    update: updateEventListeners,
    destroy: updateEventListeners
} as Module;

這里我們能夠知道，在 create 、 update 、 destroy 的時候，便會觸發(fā) ，調(diào)用 updateEventListeners;

接下來我們來詳細了解下 updateEventListeners;

閱讀之前加兩個小的知識點，有助于理解

vnode.data.on : 這個保存了一系列的綁定事件。 例如 on["click"] ,里面保存了綁定的 click 事件

vnode.listener : 作為實際綁定到元素上的回調(diào) 。 elm.addEventListener(name, listener, false);。所有的事件觸發(fā)后都是先回調(diào)到 listener ，再分發(fā)給不同的事件處理器

updateEventListeners 函數(shù)的主要邏輯如下 ：

刪除新事件列表上不存在的事件

添加新增的事件

/**
 * 更新事件監(jiān)聽器
 */
function updateEventListeners(oldVnode: VNode, vnode?: VNode): void {
    var oldOn = (oldVnode.data as VNodeData).on,
        oldListener = (oldVnode as any).listener,
        oldElm: Element = oldVnode.elm as Element,
        on = vnode && (vnode.data as VNodeData).on,
        elm: Element = (vnode && vnode.elm) as Element,
        name: string;

    // optimization for reused immutable handlers
    if (oldOn === on) {
        return;
    }

    // remove existing listeners which no longer used
    // 刪除多余的事件
    if (oldOn && oldListener) {
        // if element changed or deleted we remove all existing listeners unconditionally
        if (!on) {
            // 如果新的節(jié)點沒有綁定事件，則刪除所有的事件
            for (name in oldOn) {
                // remove listener if element was changed or existing listeners removed
                // 刪除監(jiān)聽器
                oldElm.removeEventListener(name, oldListener, false);
            }
        } else {
            for (name in oldOn) {
                // remove listener if existing listener removed
                // 刪除在新事件列表上不存在的監(jiān)聽器
                if (!on[name]) {
                    oldElm.removeEventListener(name, oldListener, false);
                }
            }
        }
    }

    // add new listeners which has not already attached
    if (on) {
        // reuse existing listener or create new
        // 重用老的監(jiān)聽器
        var listener = ((vnode as any).listener =
            (oldVnode as any).listener || createListener());
        // update vnode for listener
        listener.vnode = vnode;

        // if element changed or added we add all needed listeners unconditionally
        if (!oldOn) {
            for (name in on) {
                // add listener if element was changed or new listeners added
                elm.addEventListener(name, listener, false);
            }
        } else {
            for (name in on) {
                // add listener if new listener added
                // 添加新增的監(jiān)聽器
                if (!oldOn[name]) {
                    elm.addEventListener(name, listener, false);
                }
            }
        }
    }
}

這里我們看到，事件觸發(fā)之后都會先回調(diào)到 listener ，那它是怎么回調(diào)的呢。

首先看下創(chuàng)建 listener

/**
 * 創(chuàng)建監(jiān)聽器
 */
function createListener() {
    // 事件處理器
    return function handler(event: Event) {
        handleEvent(event, (handler as any).vnode);
    };
}

當(dāng)事件觸發(fā)的時候，會調(diào)用 handleEvent(event, (handler as any).vnode);

handleEvent 主要負責(zé)轉(zhuǎn)發(fā) ， 去除 on 里面對應(yīng)的事件處理函數(shù)，進行調(diào)用

// 處理事件
function handleEvent(event: Event, vnode: VNode) {

    var name = event.type,
        on = (vnode.data as VNodeData).on;

    // call event handler(s) if exists
    // 如果存在回調(diào)函數(shù)，則調(diào)用對應(yīng)的函數(shù)
    if (on && on[name]) {
        invokeHandler(on[name], vnode, event);
    }
}

執(zhí)行響應(yīng)的事件處理程序。

主要是處理幾種情況：

handler 為函數(shù)的情況

handler 為 object , 但是第一個元素為 function 的情況 ，eg: handler = [fn,arg1,arg2] ;

handler 為 object ，第一個元素不為 function 的情況 ， eg: handler = [[fn1,arg1],[fn2]]

/**
 * 調(diào)用事件處理
 */
function invokeHandler(handler: any, vnode?: VNode, event?: Event): void {
    if (typeof handler === "function") {
        // call function handler
        // 函數(shù)情況下直接調(diào)用
        handler.call(vnode, event, vnode);
    } else if (typeof handler === "object") {
        // call handler with arguments
        if (typeof handler[0] === "function") {
            // handler為數(shù)組的情況。 eg : handler = [fn,arg1,arg2]
            // 第一項為函數(shù)說明后面的項為想要傳的參數(shù)
            // special case for single argument for performance
            if (handler.length === 2) {
                // 當(dāng)長度為2的時候，用call，優(yōu)化性能
                handler[0].call(vnode, handler[1], event, vnode);
            } else {
                // 組裝參數(shù)，用 apply 調(diào)用
                var args = handler.slice(1);
                args.push(event);
                args.push(vnode);
                handler[0].apply(vnode, args);
            }
        } else {
            // call multiple handlers
            // 處理多個handler的情況
            for (var i = 0; i < handler.length; i++) {
                invokeHandler(handler[i]);
            }
        }
    }
}

這里通過 listener 來作為統(tǒng)一的事件接收， 更方便的對事件綁定以及解綁進行處理 ，在元素創(chuàng)建的時候綁定事件， 在銷毀的時候解綁事件，防止內(nèi)存泄露。 這種解決方式也是相當(dāng)優(yōu)雅，值得學(xué)習(xí) ：）

snabbdom源碼解析（一） 準(zhǔn)備工作

snabbdom源碼解析（二） h函數(shù)

snabbdom源碼解析（三） vnode對象

snabbdom源碼解析（四） patch 方法

snabbdom源碼解析（五） 鉤子

snabbdom源碼解析（六） 模塊

snabbdom源碼解析（七） 事件處理

個人博客地址