什麽是事件？

事件是文檔或瀏覽器窗口發生的一些特定的交互瞬間， 比如 點擊 雙擊 滾動條滑動……

什麽是事件流？

事件流指的是 從頁面接收事件的順序。

關於事件流，IE和Netscape提出了差不多相反的概念，IE提出的就是廣為人知的事件冒泡流，而Netscape提出的則是事件捕獲流。

事件冒泡流： 事件從目標元素（最底層元素）逐級冒泡到最外層元素（windows）

事件開始是由最具體的元素接收，然後逐級向上級傳播到較為不具體的節點 addEventListener 方法的第三個參數設為 false 表示事件在冒泡階段觸發

註： 所有現代瀏覽器都支持事件冒泡

　　註： 使用頻繁的事件委托 是利用了 事件冒泡 （結構 ul > li 點擊 具體的 li 元素 li 元素會冒泡到 父元素 ul 上 ，同時也會 觸發 ul 上的事件 實現了 ul 元素的 事件委托 ）

事件捕獲流 : 事件從外層元素（windows）逐級捕獲到目標元素（最底層元素）

　　　　　　　事件從不太確定的節點接收，然後向下傳播到最具體的節點，事件捕獲的用意在於 在事件到達預期目標之前捕獲它 addEventListener 方法的 第三個參數 設為 true ，表示事件在捕獲階段 觸發

註 ： 由於老版本瀏覽器不支持事件捕獲，建議大家更多的是用事件冒泡，在有特殊需要時再使用事件捕獲。

DOM事件流

事件流應該包括三個階段，事件捕獲階段 處於目標階段 事件冒泡階段

註 ： 當容器元素及嵌套元素，即在捕獲階段又在冒泡階段調用事件處理程序時：事件按DOM事件流的順序執行事件處理程序，且當事件處於目標階段時，事件調用順序決定於綁定事件的書寫順序

最底層目標元素的事件調用順序 和 冒泡，捕獲的 書寫 順序有關

事件委托的一些 問題

事件代理同時綁定了li和span，當點擊span的時候，li和span都會冒泡。

解決方法1,：

span的事件處理程序中 阻止 事件冒泡

// stopPropagation(); 阻止 事件冒泡

$(document).on(‘click‘, ‘span‘, function(e){
        alert(‘li span‘);
        e.stopPropagation();
    })

解決方法2 ：

li 的事件處理程序中檢測 target 元素

// e.target.nodeName== “ SPAN”

$(document).on(‘click‘, ‘li‘, function (e) {
        if (e.target.nodeName == ‘SPAN‘) {
            e.stopPropagation();
            return;
        }
        alert(‘li li‘);
    });

點擊一個列表時，輸出對應的索引 事件代理

<script>
    var ul=document.querySelector(‘ul‘);
    var lis=ul.querySelectorAll(‘ul li‘);
    ul.addEventListener(‘click‘, function (e) {
        var target= e.target;
        if(target.nodeName.toUpperCase()===‘LI‘){
            alert([].indexOf.call(lis,target));
        }
    },false)
</script>

js 事件流