javascript事件詳解筆記：
一、事件流
1、事件流：
描述的是頁面中接受事件的順序,有事件冒泡、事件捕獲兩種。
2、事件冒泡：
由最具體的元素接收，然後逐級向上傳播到最不具體的元素的節點（文檔）。
3、事件捕獲：
最不具體的節點先接收事件，而最具體的節點應該是最後接收事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <div id="div1"> <button id="btn1">按鈕</button> </div> </body> </html> | 1、事件冒泡情況——這種情況使用得最多： 點擊按鈕後，最先由button#btn1接收，然後傳遞給它的父級div#div1，然後再上級上html,再上級是document,最頂級是window. 所有瀏覽器都支持 window 對象。它表示瀏覽器窗口。 所有Javascript全局對象、函數以及變量均自動成爲 window 對象的成員。(全局變量是 window 對象的屬性,全局函數是 window 對象的方法)。HTML DOM 的 document 也是 window 對象的屬性之一. 2、事件捕獲情況： 點擊按鈕後最先由document接收，然後是div#div1,然後是button#btn1 |
二、事件處理
1、HTML事件處理：
直接添加到HTML結構中。
<div id="div"> <button id="btn1" onclick="myAlert(‘hello')">按鈕</button> </div> <script type="text/javascript"> function myAlert(str){ alert(str); } </script> |
2、DOM0級事件處理
把一個函數賦值給一個事件處理程序屬性。
<div id="div"> <button id="btn1">按鈕</button> </div> <script type="text/javascript"> var button = document.getElementById("btn1"); button.onclick = function(){ alert("hello"); } button.onclick = null; //清除事件 </script> |
這種方式的缺點是，當有多個事件函數同名時前者會被後者覆蓋掉，如
button.onclick = function(){alert(“hello——1"); } button.onclick = function(){alert(“hello——2"); } button.onclick = function(){alert(“hello——3"); } //最終只會執行最後一個 |
3、DOM2級事件處理——最方便，使用得多
addEventListener(“事件名”, “事件處理函數”, “布爾值”);
true:事件捕獲；
false:事件冒泡；
removeEventListener();
var button = document.getElementById("btn1"); button.addEventListener('click',myAlert1); button.addEventListener('click',myAlert2); function myAlert1(){ alert("DOM2級事件處理 1"); } function myAlert2(){ alert("DOM2級事件處理 2"); } button.removeEventListener('click',myAlert1);//移除事件 |
這種方式會依次把事件執行；
4、IE事件處理程序(版本小於等於8的情況)
attachEvent——作用和用法與addEventListener一樣(只是需要在事件前加on，如onclick)
detachEvent——作用和用法與removeEventListener一樣
5、根據瀏覽器來應用：
var button = document.getElementById("btn1"); if(button.addEventListener){ button.addEventListener('click',myAlert1); }else if(button.attachEvent){ button.attachEvent('onclick',myAlert1); }else{ button.onclick = myAlert1(); } function myAlert1(){ alert("DOM2級事件處理 1"); } |
三、事件對象（event/e）
1、事件對象：
在觸發DOM事件的時候都會產生一個對象；
2、事件對象event：
1) type: 獲取事件類型
2) target: 獲取事件目標
var button = document.getElementById("btn1"); button.addEventListener('click',myAlert); function myAlert(event){ console.log(event.type);//==>click console.log(event.target.id);//==>btn1 } |
3) stopPropagation(): 阻止事件冒泡（向上傳遞）
阻止冒泡前： var button = document.getElementById("btn1"); button.addEventListener('click',myAlert); function myAlert(event){ console.log(“button元素觸發”); } var div = document.getElementById("div"); div.addEventListener('click', myAlert2); function myAlert2(){ console.log("div元素觸發"); } | 執行後： button元素觸發 div元素觸發 //事實上經常是點擊按鈕後並不想觸發div元素事件 |
阻止冒泡後： function myAlert(event){ console.log("button元素觸發");//==>btn1 event.stopPropagation(); } | //執行結果 button元素觸發 |
<a href="#" id="aa">我是鏈接</a> var aa = document.getElementById("aa"); aa.addEventListener('click', clickA); function clickA(event){ event.preventDefault(); } | //a標籤的默認行爲是打開鏈接，而加入了這個 event.preventDefault();之後再點擊a標籤就不會執行打開鏈接這個動作了 |