在前面兩篇博客中，我們討論了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的初學者，沒看過瀏覽器的源碼，也不了解底層的實現機制，所以對於前端中的事件傳遞機制的描述可能是流於表面的表現層，而本質上是什么，或者源碼中怎么做的。則不知道。
- 這就像對於大學化學專業的學生來講，高中時學習的化學公式，是膚淺的。甚至是錯誤的。只是礙於高中生的理解水平和基礎知識，高中課本上只能這么淺，但是按照高中課本上的知識，已經能對化學現象做出一定程度對解釋了。這篇博客也是類似，也許從本質上來說，我的理解是膚淺甚至錯誤的， 但是按照這種理解方式，對於分析各個監聽函數的執行順序，的確是正確的。
有什么理解失誤的地方，歡迎指點批評。
github： https://github.com/yaowen369
歡迎對於本人的博客內容批評指點，如果問題，可評論或郵件(yaowen369@gmail.com)聯系
<p >
歡迎轉載，轉載請注明出處.謝謝
</p>
<script type="text/javascript">
function Curgo()
{
window.open(window.location.href);
}
</script>