DOM的不兼容也說明了DOM高級特性Event的不兼容,因為我們在開發(fā)Web的時候,和用戶的大量交互都是通過event來實現(xiàn)的,所以單獨把event抽出來,把其不兼容性列出:
Event的兼容性
1.事件流的區(qū)別
IE 冒泡事件流 在IE6增加<html>等元素對事件流的響應(yīng)
Mozillal 冒泡事件流 在IE6的基礎(chǔ)上增加window對象對事件流的響應(yīng)
Netscape 捕獲事件流 同Mozillal
DOM標準 冒泡+捕獲 增加文本節(jié)點對事件流的響應(yīng);同時冒泡+捕獲使得事件目標連續(xù)接收2次事件
(這可能是DOM的事件增加函數(shù)有第3個參數(shù)的原因)
2.事件處理函數(shù)
IE attach(eventName, fn)、 eventName=on+事件名
detachEvent(eventName, fn)
DOM addEventListener(eventName,fn,boolean)
removeEventListener(eventName,fn,boolean) eventName=事件名;
boolean=true:捕獲|false:冒泡
remove只有同事件流才能起效
3.事件對象
定位 IE:window.event; window.event||arguments[0]
DOM:arguments[0](事件處理函數(shù)的參數(shù)),可以通過caller來防止硬編碼獲取;
事件目標 IE:event.srcElement event.srcElement||event.target
DOM:event.target
阻止事件 IE: event.returnValue = true if(isIE){window.event.returnValue = true;}
默認行為 DOM: event.preventDefault() else{arguments[0].preventDefault();}
3.1 鼠標事件[對象]
鼠標位置 IE:event.x,event.y event.x?event.x:event.PageX
DOM:event.pageX, event.pageY event.y?event.y:event.PageY
進入事件1 IE :onmouseenter, onmouseleave 它們的區(qū)別在于處理嵌套dom object出入上,只有
DOM:mouseover,mouseout DOM標準才進行處理,enter/leave會忽略,也就是說
(fromElement!=toElement) && (this.contains(toElement) 觸發(fā)onmouseover
(fromElement!=toElement) && (this.contains(fromElement) ) 觸發(fā)onmouseout
進入事件2 IE:event.fromElement|toElement,
event.srcElement
DOM: target,relatedTarget 對于mouseover:fromElement=relatedElement,toElement = srcElement=target;
對于mouseout : toElement=relatedElement,fromElement = srcElement=target;
3.2 鍵盤事件
字符代碼 IE:event.keyCode;DOM: 數(shù)值代碼-event.keyCode。event.isChar?event.charCode:event.keyCode ,在FF中,keyCode只能獲得功能鍵的數(shù)值代碼,其他的需通過which和charCode,在Opera中,則只能通過which
Event的兼容性
1.事件流的區(qū)別
IE 冒泡事件流 在IE6增加<html>等元素對事件流的響應(yīng)
Mozillal 冒泡事件流 在IE6的基礎(chǔ)上增加window對象對事件流的響應(yīng)
Netscape 捕獲事件流 同Mozillal
DOM標準 冒泡+捕獲 增加文本節(jié)點對事件流的響應(yīng);同時冒泡+捕獲使得事件目標連續(xù)接收2次事件
(這可能是DOM的事件增加函數(shù)有第3個參數(shù)的原因)
2.事件處理函數(shù)
IE attach(eventName, fn)、 eventName=on+事件名
detachEvent(eventName, fn)
DOM addEventListener(eventName,fn,boolean)
removeEventListener(eventName,fn,boolean) eventName=事件名;
boolean=true:捕獲|false:冒泡
remove只有同事件流才能起效
3.事件對象
定位 IE:window.event; window.event||arguments[0]
DOM:arguments[0](事件處理函數(shù)的參數(shù)),可以通過caller來防止硬編碼獲取;
事件目標 IE:event.srcElement event.srcElement||event.target
DOM:event.target
阻止事件 IE: event.returnValue = true if(isIE){window.event.returnValue = true;}
默認行為 DOM: event.preventDefault() else{arguments[0].preventDefault();}
3.1 鼠標事件[對象]
鼠標位置 IE:event.x,event.y event.x?event.x:event.PageX
DOM:event.pageX, event.pageY event.y?event.y:event.PageY
進入事件1 IE :onmouseenter, onmouseleave 它們的區(qū)別在于處理嵌套dom object出入上,只有
DOM:mouseover,mouseout DOM標準才進行處理,enter/leave會忽略,也就是說
(fromElement!=toElement) && (this.contains(toElement) 觸發(fā)onmouseover
(fromElement!=toElement) && (this.contains(fromElement) ) 觸發(fā)onmouseout
進入事件2 IE:event.fromElement|toElement,
event.srcElement
DOM: target,relatedTarget 對于mouseover:fromElement=relatedElement,toElement = srcElement=target;
對于mouseout : toElement=relatedElement,fromElement = srcElement=target;
3.2 鍵盤事件
字符代碼 IE:event.keyCode;DOM: 數(shù)值代碼-event.keyCode。event.isChar?event.charCode:event.keyCode ,在FF中,keyCode只能獲得功能鍵的數(shù)值代碼,其他的需通過which和charCode,在Opera中,則只能通過which