DOM 中的事件處理

根據 w3c dom 2 events 描述，eventtarget 介面被所有支援 dom 事件模型的節點（node）實現。該介面提供了 'addeventlistener' 和 'removeeventlistener' 方法，用來繫結或解綁乙個 eventlisteners 介面到乙個 eventtarget。

dom 2 events 中定義了 event 介面，用來提供事件的上下文資訊，它提供了若干標準屬性和方法。實現 event 介面的物件一般作為第乙個引數傳入事件處理函式，以用來提供當前事件相關的一些資訊。

根據 dom 2 events 中描述，節點使用 'addeventlistener' 和 'removeeventlistener' 方法繫結和解綁事件***，但 ie6 ie7 ie8 不支援這兩個方法，而使用 'attachevent' 和 'detachevent' 方法作為替代方案，opera 兩類方法都支援。chrome safari firefox 只支援標準方法。

為了解決瀏覽器相容問題，可以自定義函式來解決。例如：

var eventutil =  else
if (element.attachevent) else 
},removehandler: function (element, type, handler) else
if (element.detachevent) else 
}};

關於 'addeventlistener' 和 'attachevent' 有幾點需要注意：

在ie中，事件物件是作為乙個全域性變數來儲存和維護的。所有的瀏覽器事件,不管是使用者觸發的，還是其他事件，都會更新window.event 物件。所以在**中，只要輕鬆呼叫 window.event 就可以輕鬆獲取事件物件，再 event.srcelement 就可以取得觸發事件的元素進行進一步處理。

對於標準的 dom 處理來說，事件物件卻不是全域性物件，一般情況下，是現場發生，現場使用，把事件物件自動傳遞給對應的事件處理函式。在**中，函式的第乙個引數就是事件物件了。

為了解決相容性問題，通常在**中如下處理：

function handler(e)

需要注意的是，使用 <

button id="

btn"

onclick="

foo()

按鈕1button

> 進行事件註冊，標準方式下卻不能在事件處理方法中取得事件物件。

原因是　οnclick="foo()" 就是直接執行了， foo() 函式,沒有任何引數傳遞給 foo 函式。

有兩個辦法解決這個問題。

第一，將註冊的方法修改為 <

button id="

btn"

onclick="

foo(event)

按鈕button

>，注意，這裡的 event 不是形參，而是實參，必須名為 event。這樣 foo 函式就可以得到事件引數了。

第二，不修改註冊的**，在事件處理方法上進行處理。關鍵在於此時實際上存在事件物件，只不過沒有傳遞給 foo 函式罷了，我們可以找到呼叫 foo 函式的那個函式，當然這是乙個系統函式，沒有關係，通過 foo.caller可以取得當前呼叫 foo 函式的函式，這個函式的第乙個引數就是事件物件，所以，我們可以這樣取得這個事件物件了。foo.caller.arguments[

0]。

注意：

ie 對事件物件的標準屬性和方法支援有限，針對大部分屬性和方法，ie 都提供了一套替代非標準的替代方案；而 firefox chrome safari opera 除了全面支援事件物件的標準屬性和方法外，還在不同程度上支援了 ie 提供的非標準替代方案。

使用特性判斷使用與標準對應的非標準方法及屬性

target　　　　　　　　　　srcelement

preventdefault()　　　　　returnvalue

stoppropagation()　　　　cancelbubble

relatedtarget　　　　　　fromelement toelement

例如：

getevent: function (event) ,
gettarget: function (event) ,
preventdefault: function (event) else 
},stoppropagation: function (event) else 
}

DOM 中的事件處理

DOM 中的事件處理介紹

DOM事件處理

JS筆記歸納 DOM中的事件處理程式

DOM 中的事件處理

DOM 中的事件處理介紹

DOM事件處理

JS筆記 歸納 DOM中的事件處理程式

相關推薦

JS筆記歸納 DOM中的事件處理程式