JS事件流、事件監聽、事件對象、事件委託

JS事件流：
0一、DOM級別和DOM事件

0二、JS事件流：頁面中接收事件的順序
　　事件冒泡階段-->處於目標階段-->事件捕獲階段 （事件捕獲總髮生在事件冒泡前面）
0三、捕獲：從外向裏；冒泡：從裏向外。外window-Document-html-body-box1-box2...裏

<div class="box" id="box1">
        <div class="box" id="box2">
            <div class="box" id="box3">
                <div class="box" id="box4">
                    <div class="box" id="box5">
                        <div class="box" id="box6">
                            點擊
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

 

 

0四、事件處理程序：就是響應某個事件的函數。事件處理程序是以on開頭的，事件沒有on
　　HTML事件處理程序：<button onclick="alert('hello')"></button> --若是寫函數就太麻煩了
　　DOM0級事件處理程序：btn.onclick=function(){} --不能給一個事件綁定多個函數，後面的函數替代前面的（和相同HTML代碼覆蓋前面同樣）
　　DOM2級事件處理程序：btn.事件監聽器（事件名，事件處理的函數，Boolean值：false默認冒泡 true捕獲） 事件名無on ----綁定多個函數，但不支持IE
　　IE事件處理程序：btn.事件監聽器（on事件處理函數名稱，事件處理函數） 事件處理函數名稱有on  更早的IE只支持冒泡，因此沒有第三個參數   -----IE
　　跨瀏覽器的事件處理程序：（作兼容） -----兼容全部瀏覽器
　　　　兼容：
　　　　　　事件監聽：btn.addEventListener()/btn.removeEventListener() IE:btn.attachEvent()/btn.deatchEvent()
0五、事件對象：事件對象是用來記錄事件發生時的相關信息的對象，只有在事件發生時纔會產生，並且只能在事件處理函數中訪問，事件觸發完後就會銷燬。
　　事件對象的屬性和方法如圖：
　　
　　方法對IE不兼容：
　　　　兼容：
　　　　　　事件對象： event = event || window.event;
　　　　　　事件對象方法preventDefault()： IE:window.event.returnValue=false
　　　　　　事件對象方法stopPropagation():IE：window.event.cancelBubble=true
0六、事件委託：原理就是利用事件冒泡，只指定一個事件處理程序，管理一類型的事件。核心是利用e.target屬性
　　　　兼容:
　　　　　　事件對象target的接口： IE：event.srcElement

　　本文只涉及概念的理解部分，代碼部分沒怎麼寫。