淺析JavaScript事件流——冒泡

一、什麼是事件冒泡流

咱們知道事件流指的是從頁面中接受事件的順序。

爲了形象理解事件冒泡，能夠想象三軍主將諸葛亮，在賬內指揮若定，眼觀六路耳聽八方，這時候前方的戰事狀況就須要靠傳令兵來傳達，當第一位傳令兵接到士官戰事信息，打出旗語，百米以外的第二個傳令兵看到後打出一樣的旗語，第三個，第四個....，直到信息傳到諸葛亮手中。用專業術語解釋就是：當一個元素上的事件被觸發的時候，好比說鼠標點擊了一個按鈕，一樣的事件將會在那個元素的全部祖先元素中被觸發。這一過程被稱爲事件冒泡；這個事件從原始元素開始一直冒泡到DOM樹的最上層。

（還有一種事件流爲捕獲，能夠理解爲諸葛亮向戰場上的某位士官發佈指令的過程）

2、事件冒泡的用處

一、事件委託

就是把事件處理器（或監聽器）添加到parent元素上，避免把其添加到多個子元素上。

<div id="out">
    <span>我是span標籤</span>
    <a href="###">我是a標籤</a>
</div>
<script>
var out=document.getElementById('out');
out.onclick=function (ev){
    var tags=out.children;
    var event=ev||window.event;
    var target=event.target||event.srcElement;    
    // event.target//火狐 事件目標   
    // event.srcElement//IE  事件源
    for (var i = 0; i < tags.length; i++) {
        tags[i].style.background='';
    };
    target.style.background='green';      //目標對象背景顏色改變
}
</script>

二、讓不一樣對象捕獲同一事件

這個實際上是給不一樣對象綁定相同的觸發事件，好比點擊onclick,當點擊其中一個的話，全部這些對象就會觸發各自所對應的函數操做。

<div>
        <span id="sp1">123
                <span id="sp2">456
                        <span id="sp3">789</span>
                </span>
        </span>    
</div>
<script>
    var sp1=document.getElementById('sp1');
    var sp2=document.getElementById('sp2');
    var sp3=document.getElementById('sp3');
    sp1.onclick=function(){
        alert("123");
    }
    sp2.onclick=function(){
        alert("456");
    }
    sp3.onclick=function(){
        alert("789");
    }
</script>

3、阻止事件冒泡

先要清楚何時須要阻止事件冒泡：好比document上有A事件，div有B事件，div裏的span有C事件（ABC是同類型事件，好比都是onclick），若不給div和span阻止事件冒泡的話，點擊span時就會觸發到B、C事件。因此事件冒泡可能會激活咱們原本不想激活的事件，致使程序錯亂，因此必要時，咱們要阻止事件冒泡。

阻止冒泡事件要考慮瀏覽器的兼容問題：

if(Event.stopPropagation){
            Event.stopPropagation();      //非IE
}else{
            Event.cancelBubble=true;    //IE
}

4、冒泡排序算法（雖然和JavaScript中的冒泡事件沒多大關係，瞭解一下也不是壞事）

冒泡排序（Bubble Sort），是一種計算機科學領域的較簡單的排序算法。

它重複地走訪過要排序的數列，一次比較兩個元素，若是他們的順序錯誤就把他們交換過來。走訪數列的工做是重複地進行直到沒有再須要交換，也就是說該數列已經排序完成。（來自百度百科）

冒泡排序算法的運做以下：（從後往前）

1. 比較相鄰的元素。若是第一個比第二個大，就交換他們兩個。
2. 對每一對相鄰元素做一樣的工做，從開始第一對到結尾的最後一對。在這一點，最後的元素應該會是最大的數。
3. 針對全部的元素重複以上的步驟，除了最後一個。
4. 持續每次對愈來愈少的元素重複上面的步驟，直到沒有任何一對數字須要比較。

JavaScript冒泡排序：

function bubbleSort(arr) {
    var i = arr.length, j;
    var tempExchangVal;
    while (i > 0) {
        for (j = 0; j < i - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                tempExchangVal = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = tempExchangVal;
            }
        }
        i--;
    }
    return arr;
}
 
var arr = [3, 2, 4, 9, 1, 5, 7, 6, 8];
var arrSorted = bubbleSort(arr);
console.log(arrSorted);
alert(arrSorted);