如果在使用javascript的時候涉及到event處理,就需要知道event在不同的浏覽器中的差異,主要的JavaScript的事件模型有三種(參考《Supporting Three Event Models at Once》),它們分別是NN4、IE4+和W3C/Safar。
1. window.event
【分析說明】先看一段代碼
function et()以上代碼在IE運行的結果是[object],而在Firefox無法運行。
因為在IE中event作為window對象的一個屬性可以直接使用,但是在Firefox中卻使用了W3C的模型,它是通過傳參的方法來傳播事件的,也就是說你需要為你的函數提供一個事件響應的接口。
【兼容處理】添加對event判斷,根據浏覽器的不同來得到正確的event:
function et()2. 鍵盤值的取得
【分析說明】IE和Firefox獲取鍵盤值的方法不同,可以理解,Firefox下的event.which與IE下的event.keyCode相當。關於彼此不同,可參考《鍵盤事件中keyCode、which和charCode 的兼容性測試》
【兼容處理】
function myKeyPress(evt){ //兼容IE和Firefox獲得keyBoardEvent對象3. 事件源的獲取
【分析說明】在使用事件委托的時候,通過事件源獲取來判斷事件到底來自哪個元素,但是,在IE下,event對象有srcElement屬性,但是沒有target屬性;Firefox下,even對象有target屬性,但是沒有srcElement屬性。
【兼容處理】
ele=function(evt){ //捕獲當前事件作用的對象4. 事件監聽
【分析說明】在事件監聽處理方面,IE提供了attachEvent和detachEvent兩個接口,而Firefox提供的是addEventListener和removeEventListener。
【兼容處理】最簡單的兼容性處理就是封裝這兩套接口:
function addEvent(elem, eventName, handler) {需要特別注意,Firefox下,事件處理函數中的this指向被監聽元素本身,而在IE下則不然,可使用回調函數call,讓當前上下文指向監聽的元素。
5. 鼠標位置
【分析說明】IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,even對象有pageX,pageY屬性,但是沒有x,y屬性。
【兼容處理】使用mX(mX = event.x ? event.x : event.pageX;)來代替IE下的event.x或者Firefox下的event.pageX。復雜點還要考慮絕對位置。
function getAbsPoint(e){