[toc] ## js事件詳解 >#### 事件流 1. 事件流: 描述的是在頁面中接受事件的順序 2. 事件冒泡: 由最具體的元素接收, 然后逐級向上傳播至最不具體的元素的節點(文檔) 3. 事件捕獲 最不具體的節點先接收事件，而最具體的節點應該是最后接收事件 >#### 事件處理 1. HTML事件處理: 直接添加到HTML結構中 ``` <button id="btn" onclick="demo()">按鈕</button> <script> function demo(){ alert("html事件處理"); } </script> ``` 2. DOM0級事件處理 把一個函數賦值給一個事件處理程序屬性 ``` <button id="btn">按鈕</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(){alert("DOM事件0級處理程序")}; // btn.onclick = null; 清除事件 </script> ``` 3. DOM2級事件處理 addEventListener("事件名", "事件處理函數", "布爾值"); true: 事件捕獲 false: 事件冒泡 removeEventListener(); ``` <button id="btn">按鈕</button> <script> var btn = document.getElementById("btn"); btn.addEventListener("click", demo1); btn.addEventListener("click", demo2); //移除: btn.removeEventListener("click", demo1); function demo1(){alert("DOM2級事件處理程序1")} function demo2(){alert("DOM2級事件處理程序2")} </script> ``` 4. IE事件處理程序 attachEvent detachEvent ``` <script> var btn = document.getElementById("btn"); if(btn.addEventListener){ btn.addEventListener("click", demo); }else if(btn.attachEvent){ btn.attachEvent("onclick", demoie); }else{ btn.onclick = demoother(); } function demo(){alert("DOM2級事件處理");} function demoie(){alert("DOM2級事件處理IE9以下");} function demoother(){alert("DOM基本事件處理");} </script> ``` >#### 事件對象 1. 事件對象: 在觸發DOM事件的時候都會產生一個對象 2. 事件對象event: 1): type: 獲取事件類型 ``` <button id="btn">按鈕</button> <script> var btn = document.getElementById("btn").addEventListener("click", showType); function showType(event){ alert(event.type); } </script> ``` 2): target: 獲取事件目標 3): stopPropagation(): 阻止事件冒泡 ``` <div id="div"><button id="btn">按鈕</button></div> <script> document.getElementById("div").addEventListener("click", show); document.getElementById("btn").addEventListener("click", show); function show(){ alert("事件冒泡"); event.stopPropagation(); //阻止事件冒泡 } </script> ``` 4): 阻止事件默認行為, 如a標簽的鏈接 * preventDefault()方法，但要給事件函數添加event參數 * return false(); * 給href加上`javascript:void(0)`