DOM的不兼容也说明了DOM高级特性Event的不兼容,因为我们在开发Web的时候,和用户的大量交互都是通过event来实现的,所以单独把event抽出来,把其不兼容性列出:
Event的兼容性
1.事件流的区别
IE 冒泡事件流 在IE6增加<html>等元素对事件流的响应
Mozillal 冒泡事件流 在IE6的基础上增加window对象对事件流的响应
Netscape 捕获事件流 同Mozillal
DOM标准 冒泡+捕获 增加文本节点对事件流的响应;同时冒泡+捕获使得事件目标连续接收2次事件
(这可能是DOM的事件增加函数有第3个参数的原因)
2.事件处理函数
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](事件处理函数的参数),可以通过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 它们的区别在于处理嵌套dom object出入上,只有
DOM:mouseover,mouseout DOM标准才进行处理,enter/leave会忽略,也就是说
(fromElement!=toElement) && (this.contains(toElement) 触发onmouseover
(fromElement!=toElement) && (this.contains(fromElement) ) 触发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: 数值代码-event.keyCode。event.isChar?event.charCode:event.keyCode ,在FF中,keyCode只能获得功能键的数值代码,其他的需通过which和charCode,在Opera中,则只能通过which