【Vue原理】Event - 源碼版之綁定標簽DOM事件

phoenixsky 發布于2019-08-23 18:35 / 491人閱讀

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定標簽事件這里的綁定

寫文章不容易，點個贊唄兄弟
專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧
研究基于 Vue版本 【2.5.17】

如果你覺得排版難看，請點擊 下面鏈接 或者拉到下面關注公眾號也可以吧

【Vue原理】Event - 源碼版之綁定標簽DOM事件

這里的綁定DOM事件，是指綁定原生標簽的DOM 事件

因為組件也是可以綁定原生DOM事件的，不過并不是在原生標簽上綁定，而是直接在組件上綁定的，這部分內容會其他文章說明

或者你可以看看白話版先了解下Event

【Vue原理】Event - 白話版

怎么解析

由于解析不是本內容的重點，所以在這里就不談怎么解析的了，只說一個結果就好了

現在有這么一個模板

模板被解析成這樣的渲染函數

渲染函數執行之后，得到這樣的 VNode

你可以看到，事件被存放到了 vnode.data 上

Vnode 有疑惑的可以看介里

【Vue原理】VNode - 源碼版

怎么綁定

既然模板已經被解析完成了，下一步就是開始綁定了

好的，繼續來走流程

在 template 解析得到 Vnode 之后，下面就會進行DOM生成掛載

而綁定事件，就發生在開始掛載，創建DOM 之后的階段

掛載時從 Vue.prototype._update 這個函數開始的

掛載的流程，可以看看這篇文章

從模板到DOM的簡要流程

1、開始掛載

VNode創建完畢，傳入 Vue.prototype._update 這個方法中，進行比對新舊VNode

然后生成DOM掛載頁面

其中需要生成DOM，調用的方法是 createElm

2、創建DOM

創建DOM，在Vue 中調用的是 createElm 這個方法

看過以前的文章的，都知道這個函數的作用是

根據 vnode 生成DOM，并且進行掛載

而在 createElm 中，會調用一個函數去處理模板上相關的數據

比如處理屬性，類名，style 之類的，其中DOM事件也是在這里處理的

這個函數就是 invokeCreateHooks，繼續往下看

function createElm(vnode) {    

    // ....處理組件

    // ....生成標簽對應dom

    // ....遞歸遍歷子節點

    invokeCreateHooks(vnode);    

    // ....插入DOM 節點

}

3、處理數據

上面源碼中出現的 invokeCreateHooks 這個方法是用來處理數據的

每種數據（style，class等），都有一個專門的函數去進行處理

而 invokeCreateHooks，就是負責執行每種數據的處理函數，很簡單，就是一個單純遍歷執行的過程

其中就包括處理 DOM 事件的函數，便是 updateDOMListeners

function invokeCreateHooks(

    vnode

) {    

    /**

     * 執行的函數包括下面這么多
     * cbs = [
     *  create:[
     *      updateAttrs, updateClass,
     *      updateDOMListeners, updateDOMProps,
     *      updateStyle, create, updateDirectives
     *  ]
     * ]

     **/
    for (var b = 0; b < cbs.create.length; ++b) {        

        // 其中會調用 updateDOMListeners

        // emptyNode 是空節點，因為這里是初始化才會調用的

              // 所以舊節點是空節點

        cbs.create[b](emptyNode, vnode);
    }
    ....

}

下面看下處理DOM 事件的函數

4、綁定DOM事件

簡化的源碼，看起來順眼多了，主要邏輯一清二楚，主要就是綁定事件和解綁事件，你看下嘍，挺簡單的

function updateDOMListeners(oldVnode, vnode) {  

    var on = vnode.data.on || {};    

    var oldOn = oldVnode.data.on || {};

    var target = vnode.elm;
    

    // 遍歷綁定的事件

    for (name in on) {

        newHandler = on[name];

        oldHandler = oldOn[name];   
     
        // 沒有舊事件，就直接添加新事件

        if (typeof oldHandler === "undefined") {
          
            // 給事件回調包裝一層

            target.addEventListener(name, function(){

                on[name]() // 執行保存在vnode的事件

            });

        }        
        // 新事件和舊事件不一樣，替換舊事件

        else if (newHandler !== oldHandler) {
            on[name] = newHandler;
        }
    }   

    // 移除舊事件

    for (name in oldOn) {   

        // 舊事件不存在新事件中，直接移除  

        if (typeof on[name] === "undefined") {

            target.removeEventListener(
                name, oldOn[name]
            );

        }
    }

}

看看綁定函數和移除函數，就只是簡單使用 addEventListener 和 removeEventListener，我沒看之前還以為 Vue 寫了很多兼容，沒想到就是這么簡單完成這個功能

有點驚訝，反正簡單也好吧，哈哈哈，簡單看著就是蘇胡啊~~

綁定邏輯很簡單

1、新舊事件相同，替換舊事件

2、新事件不存在舊事件中，綁定新事件

3、舊事件不存在新事件中，解綁舊事件

其中會給回調事件函數包裝一層函數，然后在內部執行綁定的回調，包裝一層的原因是，為了在回調中做點其他操作（比如宏微任務的處理等，這里為了簡單去掉了）

并且舊事件回調改了的時候，就更加方便了，不用解綁再綁定，直接把執行的事件回調 on[name]替換掉就ok了

好的，原生標簽綁定DOM 事件到這里就完成了，希望對大家有所幫助

云服務器 GPU云服務器 js 標簽綁定事件 event事件 js DOM事件 dom事件管理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105487.html

【Vue原理】Event - 源碼版之綁定組件DOM事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件事件上一篇已經寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

Mr_zhang 2019-08-23 18:35 評論0 收藏0
【Vue原理】Event - 白話版

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理白話版事件是我最感興趣的東西之寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

kumfo 2019-08-23 18:35 評論0 收藏0
【Vue原理】VModel - 源碼版之表單元素綁定流程

摘要：首先，兄弟，容我先說幾句涉及源碼很多，篇幅很長，我都已經分了上下三篇了，依然這么長，但是其實內容都差不多一樣，但是我還是毫無保留地給你了。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也...

sarva 2019-08-23 18:25 評論0 收藏0
【Vue原理】Event - 源碼版之綁定組件自定義事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之綁定組件自定義事件組件寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于...

amuqiao 2019-08-23 18:36 評論0 收藏0
【Vue原理】Compile - 源碼版之 generate 拼接綁定的事件

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之拼接綁定的事件今天我們寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究...

OnlyMyRailgun 2019-08-26 10:45 評論0 收藏0