JS 事件學習筆記

JS 事件學習筆記
事件流

如果說某個元素有祖先元素，其祖先元素和它都定義了相同的事件，那麼在該元素上發生某個事件的時候，涉及到事件在該元素和祖先元素間的行程順序問題。
分為兩種：
事件冒泡：從最具體的元素開始接收，執行事件處理常式，然後把該事件往上傳遞一直到document對象。
如果在某個元素上觸發了某個事件，則會調用其事件處理常式，若該元素沒有定義事件處理常式或者事件返回true，則會交由父級對象處理，從裡到外，所有父級對象的同類事件都會被啟用。一直上傳到document對象為止。
事件捕獲：相反，從最外層的document先捕獲再依次往最具體的元素傳遞。即內部元素中觸發了某個事件後，先由外部元素”截獲“該事件，並執行自己綁定的事件處理常式。再將該事件向下傳遞給內部元素。
通常都使用事件冒泡。

DOM2級事件流

分為三個階段：捕獲階段、處於目標階段（實際目標接收到事件）、事件冒泡階段（在該階段讓具體目標對事件作出響應）。也就是說事件首先從document往下傳遞，一直到目標對象，然後再以起泡方式往上傳遞到document。但是包含元素具體在哪個階段執行事件處理常式是由添加事件的函數的參數來設定的。也就是說父元素一定是先接收到事件的，但是不一定在截獲的時候就執行。
多數支援dom事件流的瀏覽器都遵循規定：在捕獲階段不涉及事件目標，但chrome、Firefox、IE9等瀏覽器可在捕獲階段觸發事件對象上的事件，結果就是有兩個機會（階段）在目標對象上操作事件。

事件處理常式html事件處理常式

即相應某個事件的函數，以”on“開頭。事件處理常式中的代碼在執行時有權訪問全域範圍中的任何代碼。
函數中有一個不用自訂的局部變數even，即事件對象；函數中的this指向事件的目標元素。
擴充範圍：with語句
該方式的缺點p-350

JavaScript指定事件處理常式

1. DOM0級事件處理常式

該方式讓js代碼和html緊密耦合。應使用JavaScript指定事件處理常式：將函數賦值給要操作對象的事件處理常式屬性。如btn.onclick=function(){}。
注意：在JS代碼運行到綁定事件前不會指定任何事件處理常式，因此若這些代碼在頁面中位於按鈕的後面則可能在一段時間內點擊按鈕沒有反應。
該方式指定的事件處理常式被認為是元素的方法，是在元素的範圍中運行，this引用當前元素。以該方式指定，會在事件流的冒泡階段被處理。
刪除綁定的事件：btn.onclick=null

2 . DOM2級事件處理常式
為DOM結點規定了方法addEventListener()和removeEventListener()用於設定和刪除事件處理常式，這兩個方法都包含三個參數：

參數一：指定事件名稱 參數二：指定事件處理常式 參數三：布爾值，true表示接收該事件的對象在事件捕獲階段就呼叫事件處理常式，false表示接收到該事件的對象要等到在冒泡階段才調用。例如：

//html代碼

I am outside I am inside //js代碼 window.onload=function(){ var outside = document.getElementById("outside"); outside.addEventListener("click",function(){alert("I am outside")},true);//在捕獲階段就調用 var inside = document.getElementById("inside"); inside.addEventListener("click",function(){alert("I am inside")},true); }

如上面的代碼，外面的盒子outside的事件處理常式設定為true，則是在捕獲階段如果截獲到該事件了，就立即調用其事件處理常式，也就是說如果點擊了內部盒子，則輸出順序為”I am outside”，”I am inside“。
若將外部盒子的true改為false，意思是在冒泡階段才調用處理常式，則點擊內部盒子後，輸出順序為”I am inside“，”I am outside”。

該方式仍是在所依附的元素的範圍中進行。該方式的優點是可以添加多個事件（包括同名的不會被覆蓋），按照添加的先後順序執行。
注意：removeEventListener()的參數和addEventListener的相同，但是匿名函數無法移除，也就是說事件根本沒有解除綁定，仍然點擊有效。實際上這個函數與傳入addEventListener中的匿名函數完全是兩個，可通過傳入持有匿名函數引用的變數來解決：

<script type="text/javascript">window.onload=function(){    var btn = document.getElementById("show");    var handler = function(){alert(this.value)};    btn.addEventListener("click",handler,false);    btn.removeEventListener("click",handler,false);}</script>

為了最大限度相容各種瀏覽器，最好將事件處理常式添加到事件流的冒泡階段，只在需要在事件達到目標之前截獲它的時候將事件處理常式添加到捕獲階段。

禁止事件冒泡：

先說幾個相關的方法和屬性：

cancelBubble（HTML DOM Event對象的屬性）：如果事件控制代碼想阻止事件傳播到包容對象，必須把該屬性設為 true。 stopPropagation（HTML DOM Event 對象方法）：終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法後，該節點上處理該事件的處理常式將被調用，事件不再被指派到其他節點。 preventDefault（HTML DOM Event 對象方法）通知瀏覽器不要執行與事件關聯的預設動作。

可將阻止事件冒泡的程式寫成下列函數：

function stopBubble(e){    if(e && e.stopPropagation){        e.stopPropagation();    }else{        window.even.cancelBubble=true;    }}

把這個stopBubble(e)函數放到你想要的阻止事件冒泡函數裡面就可以阻止事件冒泡了