Android與javascript中事件分發機制的簡單比較

在前面兩篇博客中，我們討論了Android中的事件分發的相關內容，那麼在本篇博客當中，我們就簡單探討一下html或javascript中的事件分發機制，併進行簡單的對比。在前端中，對事件進行綁定有三種方式。（1）.在DOM中綁定。 (2).在腳本中綁定。 (3).通過監聽事件綁定而對於前兩種 ...

在前面兩篇博客中，我們討論了Android中的事件分發的相關內容，那麼在本篇博客當中，我們就簡單探討一下html或javascript中的事件分發機制，併進行簡單的對比。

在前端中，對事件進行綁定有三種方式。

（1）.在DOM中綁定。

<!-- @author www.yaoxiaowen.com -->
<div id="div-1" onclick="div1click()">div - 1</div>
<script>
    function div1click() {
        console.log("click div-1");
    }
</script>

(2).在腳本中綁定。


<div id="div-2"> div - 2</div>
<script>
    document.getElementById("div-2").onclick = function () {
        console.log("click div-2");
    }
</script>

(3).通過監聽事件addEventListener綁定

  <div id="div-3">div - 3</div>
    <script>
        document.getElementById("div-3").addEventListener("click", div3Click);
        function div3Click() {
            console.log("click div-3");
        }
    </script>

而對於前兩種事件綁定的方式，比較簡單一些。

1.第一種在dom中綁定的方式，如果同時註冊多個函數，則執行第一個綁定的函數。
意思就是當如下形式時：


<div id="div-1" onclick="div1click_1()",onclick="div1click_2()">div - 1</div>
<script>
    function div1click_1() {
        console.log("click div-1 click-1");
    }

    function div1click_2() {
        console.log("click div-1 click-2");
    }
</script>

點擊的輸出結果如下：

    click div-1 click-1

2.第二種在腳本中進行綁定，如果同時註冊多個函數，則執行最後一個綁定的函數。
意思就是當如下形式時：

<!-- @author www.yaoxiaowen.com -->
<div id="div-2"> div - 2</div>
    <script>
        document.getElementById("div-2").onclick = function () {
            console.log("click div-2 第一次註冊");
        }

        document.getElementById("div-2").onclick = function () {
            console.log("click div-2 第二次註冊");
        }
    </script>

此時輸出的結果是：

    click div-2 第二次註冊

3.而對於第三種 addEventListener的方式，則比較複雜，這也是我們本篇文章主要討論的內容。

首先要明確第三種和前兩種的最大不同點是，前兩種方式註冊多個函數，也只會執行一個，而第三種如果註冊多個函數，則每個函數都會執行。

我們假設相互嵌套的三個div，最外層是outer,它嵌套著middle，middle再嵌套著一個小的 inner。
形式如下：

 <div id="outer-div" class="common">
        <div id="middle-div" class="common">
            <div id="inner-div" class="common"></div>
        </div>
    </div>

見圖片：

當我們點擊最裡面的 inner，那麼這個事件又是什麼樣的觸發順序呢。

我覺的我們可以這樣理解，不管是對於android還是前端，當事件發生時，一定是最外層的view先感知到的，然後再依次向內傳遞的。
這個道理在 Android View的事件分發的第一段就說過，因為這個事件的發生總是要先從硬體產生，驅動->內核->framework等依次向上傳遞。不管是任何一個設備，（手機或者pc）這點是不會變的。

回到前端當中的問題，我們可以這樣理解，outer先感知到，其次middle才感知到，再其次inner才感知到。這點和android中的沒區別，不過問題是該過程中怎麼處理呢。

我們再來回頭看看addEventListener方法。
這個方法原型是這樣的。

document.addEventListener(event, function, useCapture)

關於它的參數。event是描述事件名稱的字元串，比如click，（註意不是onclick）。function是事件觸發後要執行的函數。那麼第三個參數useCapture是幹啥的呢。

這就說到了前端中事件執行的兩種不同的策略，冒泡 與 捕獲。

冒泡：從內向外，就像你在湖心扔了一粒石頭，形成的波紋都是從內向外擴散的，意思就是，三個view都註冊監聽了同種類型的事件，那麼inner先執行，其次才是middle -> outer。
捕獲：從外向內，就像人類狩獵圍成的包圍圈一樣，越來越小。換成我們demo的場景，事件是outer先執行，然後其次是 middle -> innder。

所以第三個參數useCapture,其實是個boolean類型的：

true:捕獲階段執行。
false:冒泡階段執行。（預設值）。

那麼為什麼會存在這兩種截然相反的事件執行策略呢，這就要從當年微軟與網景的瀏覽器大戰說起了。這兩種方式是這兩家公司分別選擇的策略。後來w3c為了統一，就兩種方式都保留了。

那麼如果對於outer,middle,inner每個元素都註冊了多個監聽事件，有的冒泡，有的排序，那麼這個執行順序又是什麼呢。

本篇文章中，我們說“註冊了多個監聽事件”，預設是說同種類型的，比如都是"click"。不同類型的，比如一個“mousedown”，一個“click”，這當然沒啥關係。

假設我們觸發事件的焦點是在 inner 元素中。

手動畫張圖方便理解這個問題。

見圖片：

事件整體的傳遞順序是 1 -> 2 -> 3 -> 4.

outer首先感知到事件。然後傳遞到middle。（圖片當中的 1 過程），該過程中，事件捕獲前進。如果碰到某個元素註冊了捕獲函數，則執行函數，如果某個元素（比如middle）註冊了多個捕獲函數又會怎麼樣呢？答案是按照它們註冊的順序都執行。

事件傳遞到 inner，（圖片當中的 2 過程），如果inner同時也註冊了多個捕獲函數和冒泡函數，則很簡單的，按照它們的註冊順序執行。（此時不分什麼冒泡還是捕獲類型的）。

然後事情再倒過來傳遞，（圖片中的3 -> 4）,再傳遞到middle和outer，在這個過程中，如果碰到某個元素註冊了冒泡函數，則執行函數，如果某個元素（比如middle）註冊了多個冒泡函數，則按照它們的註冊順序都執行。

這個執行的順序解釋完了，來看一個demo。

  function run() {
        outerDiv = document.getElementById("outer-div");
        middleDiv = document.getElementById("middle-div");
        innerDiv = document.getElementById("inner-div");

        outerDiv.addEventListener("click", outerClick_1);
        outerDiv.addEventListener("click", outerClick_2, true);
        outerDiv.addEventListener("click", outerClick_3, true);

        middleDiv.addEventListener("click", middleClick_1);
        middleDiv.addEventListener("click", middleClick_2, true);

        innerDiv.addEventListener("click", innerClick_1);
        innerDiv.addEventListener("click", innerClick_2, true);
        innerDiv.addEventListener("click", innerClick_3);

    }

<!-- @author www.yaoxiaowen.com -->
    function outerClick_1() {
       console.log("outer 1");
    }
    function outerClick_2() {
        console.log("outer 2");
    }

    function outerClick_3() {
        console.log("outer 3");
    }


    function middleClick_1() {
        console.log("middle 1");
    }
    function middleClick_2() {
        console.log("middle 2");
    }



    function innerClick_1() {
        console.log("inner  1");
    }
    function innerClick_2() {
        console.log("inner 2");
    }
    function innerClick_3() {
        console.log("inner  3");
    }

猜想一下，此時點擊 inner,則列印的順序會是什麼呢。
答案我就不貼出來了，感興趣的可以參考 https://github.com/yaowen369/BlogDemo/blob/master/H5_JS/WebDemo/test/event/event.html。

一點感想

分別學習了android和js中的事件分發，其實感覺起來有相同的地方，也有不同的地方。

最大的不同是在於，addEventListener方法竟然可以註冊多個監聽函數同時起作用,這點很讓我震驚。因為在我的潛意思里，就像下麵這段代碼：


void func1(int a){
    //do something
}
void func2(int a){
    //do something
}

int (*p)(int) = func1;
//do something
p = func2;

p雖然最開始指向func1，但是後來又指向了func2。那麼此後，p就和func1沒什麼關係了啊。

沒看過瀏覽器源碼，所以也不理解為什麼addTouchListener可以執行多個監聽函數，但是這一點和主流的編程習慣的確不同。

在android中，某個view一旦消費了事件（return true）。那麼其他view就不會再消費事件了。它們的onTouchEvent不會再被調用了。但是在js中，多個元素都可以處理這個事件。我覺得這就像onTouchEvent雖然被調用了，也寫了相應的代碼處理了業務邏輯，但是卻返回了false一樣。
至於它們的傳遞過程，我覺得是差不多的，都是類似於 U字形的傳遞順序。雖然在android中底層的view的onTouchEvent返回了true，就不會再有其他view的onTouchEvent來調用了。但是各個view的dispatchTouchEvent方法依舊要被調用的。
所以android和js傳遞順序雖然相同，但是中間截取和處理的過程卻有差異。

從這個角度來講，雖然android和js中，事件分發傳遞看似有很大差異，但是我覺得，從本質上來講確有幾分相似的。都是從外向內，從父元素傳遞到子元素。

在學習這些內容時，和公司的ios同事也描述了一下android當中的事件分發過程，問它們ios是什麼機制，他們說其實也差不多，也許這些就是編程領域殊途同歸的地方吧。

聲明一點：因為本人是js的初學者，沒看過瀏覽器的源碼，也不瞭解底層的實現機制，所以對於前端中的事件傳遞機制的描述可能是流於錶面的表現層，而本質上是什麼，或者源碼中怎麼做的。則不知道。

這就像對於大學化學專業的學生來講，高中時學習的化學公式，是膚淺的。甚至是錯誤的。只是礙於高中生的理解水平和基礎知識，高中課本上只能這麼淺，但是按照高中課本上的知識，已經能對化學現象做出一定程度對解釋了。這篇博客也是類似，也許從本質上來說，我的理解是膚淺甚至錯誤的，但是按照這種理解方式，對於分析各個監聽函數的執行順序，的確是正確的。

有什麼理解失誤的地方，歡迎指點批評。