javascript中的事件Event

標籤：width   範圍   element   att   lsp   boolean   cape   對象   event對象   

 

一、事件流

1、事件流：描述的是從頁面中接受事件的順序

      IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。

 

2、事件冒泡

     IE的事件流叫做事件冒泡(event bubbing)，即事件開始時由具體的元素接受，然後逐級向上傳播到較為不具體的節點。如果點擊div。則事件流如下

     div --> body --> html --> body

    事件冒泡的過程

            

 

3、事件捕獲

     Netscape提出的事件流是事件捕獲(event capturing)，即不太具體的節點更早的接受到事件，然後逐級向下傳遞，具體的節點最後接受到事件。如果點擊div，則事件流如下

     body--> html --> body -->div

        

 

   4、DOM事件流

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

     事件流傳遞情況如下

         

 

 二、事件處理(handler)

    1、事件監聽器或事件處理常式，即響應某個事件的函數，名字是以"on"開頭的。

    2、DOM0 級的Event handler

    每個元素（包括window,document）都有自己的事件處理常式屬性，屬性通常全部小寫，將屬性設定成函數即可指定處理函數。

   var btn = document.getElementById(‘myBtn‘);

       btn.onclick = function() {

       alert(this.id); // ‘myBtn‘

   }

註：事件中的this對象引用當前元素，即可訪問元素的所有屬性和方法。

3、DOM2級的Event handler

      定義了2個方法用於指定和刪除事件處理函數：addEventListener，removeEventListener。

      btn.addEventListener(name, handler, capture);

      btn.removeEventListener(name, handler, capture);

     倆個方法接受三個參數：

     name 事件名，

     handler 事件處理函數，

     capture 是否在捕獲階段調用handler； true 是， false 在冒泡階段處調用handler

註：通過addEventListener添加的事件處理常式只能使用removeEventListener移除。

4、IE中的Event handler

    IE 中實現了倆個方法：attachEvent、detachEvent。

    attachEvent(‘on‘+name, handler);

    detachEvent(‘on‘+name, handler);

    當對一個元素添加多個事件時，觸發的順序是添加順序相反的。

註：在使用DOM0級方法時，事件處理常式在其所屬元素範圍運行，而使用attachEvent方法的時，事件處理常式運行在全域範圍下。即

    btn.attachEvent(‘onclick‘, function(){

        alert(this === window); // => true

   })

5、跨瀏覽器事件處理常式

   見代碼EventUtils

三、事件對象

      在觸發DOM上的事件時，會產生一個包含所有與事件相關資訊的對象Event。

1、DOM中的事件對象

     Event都會有的屬性：

bubbles	Boolean	唯讀	事件是否冒泡
cancelable	Boolean	唯讀	是否可以取消事件預設行為
currentTarget	Element	唯讀	處理常式現在正在處理的元素
detail	Integer	唯讀	事件相關的細節資訊
preventDefault	Function	唯讀	取消事件的預設行為。cancelable為true可用。
stopPropagation	Function	唯讀	阻止事件捕獲或冒泡。bubbles為true可用
target	Element	唯讀	事件的目標元素
trusted	Boolean	唯讀	true表示是瀏覽器產生的；false為開發人員建立
type	String	唯讀	事件類型
eventPhase	Integer	唯讀	事件所處階段：1 捕獲階段； 2 處於目標； 3 冒泡階段

 

2、IE中的事件對象

      訪問IE中的Event對象的方式有如下幾種不同方式：

     1）使用DOM0級方法添加的事件，event對象作為window對象的一個屬性存在。使用window.event。

     2）通過HTML特性指定的事件，可以通過event變數來訪問event對象。

     Event對象包括的屬性和方法如下

cancelBubble	Boolean	唯讀	預設為false，為true時阻止事件冒泡
returnValue	Boolean	唯讀	預設為true，為false時阻止預設事件行為
srcElement	Element	唯讀	事件目標，與DOM中的target屬性相同
type	String	唯讀

 

 Event 第一部分暫時介紹到這裡，後續有空再更新學習筆記。感謝觀看！！

javascript中的事件Event