functiondoIt(oEvent){alert(oEvent);} 。IE和firefox浏览器的event事件兼容性怎么样?兼容性详情说明。" />

IE和firefox浏览器的event事件兼容性怎么样?兼容性详情说明

1,关于event的用法
存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用 。
例如:
这段代码在Mozilla浏览器中是不能正常工作的,因为Mozilla浏览器中没有默认的event对象,只能在事件发生的现场使用 。

IE和firefox浏览器的event事件兼容性怎么样?兼容性详情说明

文章插图
下面看一下两者都兼容的代码:
IE&Moz

2,关于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相当于ie下的event.srcElement,但细节上有区别,后者是返回一个Html Element
而e.target返回的是个节点,也就是说包括文本节点 。
看下面的例子代码,可以看出两者的区别和联系:
IE ONLY
12 34

Moz
12 34

【IE和firefox浏览器的event事件兼容性怎么样?兼容性详情说明】3,键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当 。
见代码:
IE

Moz

4,event.x,event.y[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的绝对位置,使用event对象的event.x和event.y
Moz中取鼠标点击的绝对位置,使用event对象的event.pageX和event.pageY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz

5,event.offsetX,event.offsetY[IE]和event.pageX,event.pageY[Moz]
IE中取鼠标点击的相对位置,使用event对象的event.offsetX和event.offsetY
Moz中取鼠标点击的相对位置,使用event对象的event.layerX和event.layerY
所以为了兼容,需要自己做处理,参考代码如下:
IE&Moz

6,事件绑定
事件绑定上Mozilla用addEventListener,removeEventListener
对应IE的attachEvent,detatchEvent
看下面的例子代码:
IE ONLY

Moz

注意:蓝色字的部分 。IE中要在事件前加on,而在Moz中不能加 。
对象选择篇
1,通过ID访问Html元素
一般直接使用document.getElementById就可以了,如果要兼容IE4,可以再加上document.all
IE&Moz

2,如果要使用document.form.item类似的访问方法,要注意下面的问题:
IE中允许存在类似于 document.formName.item("itemName") 这样的语句,但是Moz下是不可以的
要想在Mozilla下也可以正常运行,需要把写法正规化,如下:
IE&Moz

注意:在Mozilla中,访问数组的时候,不能用类似于arr("itemName")的形式,必须使用中括号,而在IE中两者都可以 。
另外,在写上面这段测试代码的时候,我发现了Mozilla浏览器的一个有趣的问题,不知道是不是Bug 。大家可以试一下下面这段代码:
Moz

Moz

个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1,删除节点
IE中有removeNode方法,可以对节点进行删除,如下:
IE

但是Mozilla中,没有这个方法,只能是先找到父节点,然后调用Dom方法removeChild才可以达到目的,如下:
IE&Moz

推荐阅读