JavaScript事件處理程序

事件

事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間。

事件流

事件流描述的是從頁面中接收事件的順序

IE的事件流是事件冒泡流，DOM的事件流是事件捕獲流

事件冒泡

事件的開始是由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然後逐級向上傳播到較爲不具體的節點（文檔）

如果你點擊div,那麼在div上接收到click事件，之後傳播到div的父元素，div父元素接收到click事件，再向上傳播至div的爺爺元素，div爺爺元素接收到click事件，再向上傳播，直到document。

事件捕獲

不太具體的節點應該更早的接收到事件，而最具體的節點應該最後接收到事件。事件捕獲的用意在於在時間到達預定目標之前捕獲它

如果你點擊div,那麼首先在document上接收到click事件，之後向下捕獲到div的爺爺元素，div爺爺元素接收到click事件，再向下捕獲至div的父元素，div父元素接收到click事件，再向下捕獲，直到div。

DOM事件流

“DOM2級事件”規定的事件流包括三個階段：事件捕獲階段、處於目標階段和事件冒泡階段

先捕獲在冒泡，DOM樹中每個元素都接收兩次事件

事件處理程序( event handler )

響應事件的函數，當有事件觸發了之後，作出的迴應。

HTML事件處理程序

1 2 3 4 5 6

<script> function showMessage () { alert("Hello World!"); } </script> <input type = 'button' value = 'Click Me' onclick = 'showMessage()' />

注意：此時的onclick = 'showMessage()'中的 ‘showMessage’ 帶有 ‘()’，因爲onclick = '要執行的代碼'，一旦用戶點擊瀏覽器就eval('要執行的代碼')。

DOM2級事件處理程序

1. addEventListener()添加事件處理程序（事件監聽）
   參數：
   • 要處理的事件名
   • 事件處理函數
   • 布爾值[可選]：如果是true，則表示在捕獲階段調用事件處理程序，如果是false或者未設置，表示在冒泡階段調用事件處理程序

2. removeEventListener()刪除事件處理程序（事件監聽）
   參數：

   • 要處理的事件名
   • 事件處理函數
   • 布爾值[可選]：如果是true，則表示在捕獲階段調用事件處理程序，如果是false或者未設置，表示在冒泡階段調用事件處理程序

3. 通過addEventListener()添加的事件處理程序只能通過removeEventListener()來刪除，並且移除時傳入的參數與添加處理程序時使用的參數相同，所以這也就意味着通過addEventListener()添加的匿名函數將無法被移除，所以我們一定要給addEventListener()的事件處理函數命名，從而確保我們能夠將其移除。
   優點：可以爲同一個元素添加多個事件處理程序

IE事件處理程序

1. attachEvent()添加事件處理程序（事件監聽）
   參數：
   • 要處理的事件名
   • 事件處理函數

2. detachEvent()刪除事件處理程序（事件監聽）
   參數：

   • 要處理的事件名
   • 事件處理函數

3. 由於 IE8 及更早的版本只支持冒泡，所以通過attachEvent()添加的事件處理程序都會被添加到冒泡階段
   注意：在使用attachEvent()方法的情況下，事件處理程序會在全局作用域中運行，此時this === window.

   跨瀏覽器的事件處理程序

   使用能力檢測。並且要保證處理事件的代碼能在 DOM 和 IE 下一致地運行，只需要關注冒泡階段

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

   function addHandler ( element,type,handler ) { if ( element.addEventListener ){ element.addEventListener( type,handler,false ); } else if ( element.attachEvent ){ element.attachEvent( 'on' + type,handler ); } else { element[ 'on' + type ] = handler; } } function removeHandler ( element,type,handler ) { if ( element.removeEventListener ){ element.removeEventListener( type,handler,false ); } else if ( element.detachEvent ){ element.detachEvent( 'on' + type,handler ); } else { element[ 'on' + type ] = null; } }

注意：當在目標元素上既有捕獲階段調用的事件處理程序，又有冒泡階段調用的事件處理程序，則按照代碼書寫順序依次調用。

1 2 3 4 5 6 7

btn.addEventListener( 'click',function(){ console.log( '捕獲階段' )； },true ); btn.addEventListener( 'click',function(){ console.log( '冒泡階段' )； },false );

以上代碼依次打印出：
捕獲階段
冒泡階段

1 2 3 4 5 6 7

btn.addEventListener( 'click',function(){ console.log( '冒泡階段' )； },false ); btn.addEventListener( 'click',function(){ console.log( '捕獲階段' )； },true );

以上代碼依次打印出：
冒泡階段
捕獲階段

• 
  

© CZBBhkrx