js事件流觸發原理

DOM2.0模型將事件處理流程分為三個階段：一、事件捕獲階段，二、事件目標階段，三、事件起泡階段

原理圖

事件捕獲階段： 當某個元素觸發某個事件（如onclick事件），頂層對象就會發出一個事件流，隨DOM樹的根節點向目標節點流去，直到到達事件真正發生的目標元素身上。在這個過程中，各個dom上綁定的事件不會被觸發。

事件目標階段： 當事件流到達目標元素的時候，如果目標元素綁定的有事件，則執行，如果沒有，將進行事件起泡階段。

事件起跑階段： 事件流原路返回，從目標元素開始，向DOM樹 根節點流動，途中如果遇到有節點綁定了相應的事件處理函數，這些函數就會被觸發。這樣，整個事件的觸發便形成一個閉環。

關于事件委托

根據事件流原理，我們知道當點擊一個元素之后，全局會獲得一個event.target對象（注意，是全局對象,IE 下是window.event.srcElement），及目標對象，因為這個event.target變量是全局的，因此，我們可以通過這個對象，在事件冒泡階段將其傳遞給父親或者更高級節點，委托處理。

一個簡單的例子：

    <div id="uu">
      <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
      </ul>
    <div>

//這里我們綁定在了父節點的事件上
document.getElementById('uu').onclick = function(e) {
          var e = e || window.event;
          var target = e.target || e.srcElemnt;
          console.log(target)
          if (target.nodeName.toLowerCase() === 'li') {
            console.log(target.innerHTML)
          }
        }

// 我們還可以綁定在他太爺爺節點上， 反正event.target 都是一樣的
document.onclick =function(e){
          var e = e || window.event;
          var target = e.target || e.srcElemnt;
          console.log(target)
          if (target.nodeName.toLowerCase() === 'li') {
            console.log(target.innerHTML)
          }
        }

由于是同一個全局變量event.target   所以得到的輸出結果一樣

js阻止冒泡

由于事件流的機制，在捕獲了事件目標之后，事件流往回走，會執行經過的dom節點上綁定的事件。在很多情況下，我們不想讓綁定在父節點事件執行，這時我們就需要阻止冒泡事件的發生。

同一個例子

document.getElementById('uu').onclick = function(e) {
          var e = e || window.event;
          if ( e && e.stopPropagation )
              //因此它支持W3C的stopPropagation()方法
              e.stopPropagation(); 
          else
              //否則，我們需要使用IE的方式來取消事件冒泡
              window.event.cancelBubble = true;
          var target = e.target || e.srcElemnt;
          console.log(target)
          if (target.nodeName.toLowerCase() === 'li') {
            console.log(target.innerHTML)
          }
        }

        document.onclick =function(e){
          var e = e || window.event;
          var target = e.target || e.srcElemnt;
          console.log(target)
          if (target.nodeName.toLowerCase() === 'li') {
            console.log(target.innerHTML)
          }
        }

此時再次進行點擊ul內的元素，ul上綁定的方法會執行，document.onclick方法將不會被執行，冒泡階段被中斷。

事件綁定的兼容

HTML5工作組寫法

var addEvent = (function() {
    if (document.addEventListener) {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.addEventListener(type, fn, false);
            }
        };
    } else {
        return function(el, type, fn) {
            if (el.length) {
                for (var i = 0; i < el.length; i++) {
                    addEvent(el[i], type, fn);
                }
            } else {
                el.attachEvent('on' + type,
                function() {
                    return fn.call(el, window.event);
                });
            }
        };
    }
})();