IE和Mozilla的兼容性汇总event


Posted in Javascript onAugust 12, 2007
1,关于event的用法
存在问题:IE中可以直接使用event对象,但是Mozilla不可以直接使用。
例如: <input type="button" value="clickMe" nclick="doIt()">
<script. language="javascript">
function doIt(){
alert(event);
}
</script> 这段代码在Mozilla浏览器中是不能正常工作的,因为Mozilla浏览器中没有默认的event对象,只能在事件发生的现场使用。
下面看一下两者都兼容的代码:
IE&Moz
<input type="button" value="clickMe" nclick="doIt(event)">
<script. language="javascript">
function doIt(oEvent){
alert(oEvent);
}
</script>

2,关于event.srcElement[IE]和event.target[Moz]
Mozilla下的e.target相当于ie下的event.srcElement,但细节上有区别,后者是返回一个Html Element
而e.target返回的是个节点,也就是说包括文本节点。
看下面的例子代码,可以看出两者的区别和联系:
IE ONLY
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="javascript">

function doIt(){ alert(event.srcElement.tagName); }

</script>

Moz
<table border="1" width="50%" nclick="doIt()"> <tr><td>1</td><td>2</td></tr> <tr><td>3</td><td>4</td></tr></table>
<script. language="javascript">

function doIt(oEvent){

var Target = oEvent.target;

while(oTarget.nodeType != 1)

Target = oTarget.parentNode;

alert(oTarget.tagName);

}

</script>

3,键盘值的取得
Mozilla下的event.which与IE下的event.keyCode相当。
见代码:
IE
<input type="text" nkeypress="doIt()"><script. language="javascript"> function doIt(){ alert(event.keyCode); }</script>

Moz
<input type="text" nkeypress="doIt(event)"><script. language="javascript"> function doIt(oEvent){ alert(oEvent.which) }</script>

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
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="javascript"> function doIt(oEvent){ var posX = oEvent.x ? oEvent.x : oEvent.pageX; var posY = oEvent.y ? oEvent.y : oEvent.pageY; alert("X:" + posX + "\nY:" + posY) }</script>

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
<div id="myDiv" nclick="doIt(event)" style="position:absolute;top:100;left:100; width:100;height:100;background-color:orange;border:1px solid black"><script. language="javascript"> function doIt(oEvent){ var posX = oEvent.offsetX ? oEvent.offsetX : oEvent.layerX; var posY = oEvent.offsetY ? oEvent.offsetY : oEvent.layerY; alert("X:" + posX + "\nY:" + posY) }</script>

6,事件绑定
事件绑定上Mozilla用addEventListener,removeEventListener
对应IE的attachEvent,detatchEvent

看下面的例子代码:
IE ONLY
<input type="button" value="test" id="testBT"><script. language="javascript">var Button = document.getElementById("testBT");oButton.attachEvent( "onclick", clickEvent );function clickEvent(){ alert("Hello, World!");}</script>

Moz
<input type="button" value="test" id="testBT"><script. language="javascript">var Button = document.getElementById("testBT");oButton.addEventListener( "click", clickEvent, true );function clickEvent(){ alert("Hello, World!");}</script>

注意:蓝色字的部分。IE中要在事件前加on,而在Moz中不能加。
对象选择篇
1,通过ID访问Html元素
一般直接使用document.getElementById就可以了,如果要兼容IE4,可以再加上document.all
IE&Moz
<input type="button" value="clickMe" id="myButton"><script. language="javascript"> alert(document.getElementById("myButton").value);</script>

2,如果要使用document.form.item类似的访问方法,要注意下面的问题:
IE中允许存在类似于 document.formName.item("itemName") 这样的语句,但是Moz下是不可以的
要想在Mozilla下也可以正常运行,需要把写法正规化,如下:
IE&Moz
<body> <form. name="myForm"> <input value="test" id="txt" /> </form> </body> <script. language="javascript"> alert(document.myForm.elements["txt"].value); </script>

注意:在Mozilla中,访问数组的时候,不能用类似于arr("itemName")的形式,必须使用中括号,而在IE中两者都可以。
另外,在写上面这段测试代码的时候,我发现了Mozilla浏览器的一个有趣的问题,不知道是不是Bug。大家可以试一下下面这段代码:
Moz
<form. name="myForm"> <input value="test" id="txt" /> </form> <script. language="javascript"> alert(document.myForm); alert(document.forms.length); //结果为0???</script>

Moz
<body><form. name="myForm"><input value="test" id="txt" /></form></body><script. language="javascript">alert(document.myForm);alert(document.forms.length); //结果为1,正常</script>

个人认为可能是因为Mozilla太符合Dom标准了吧
DOM篇
1,删除节点
IE中有removeNode方法,可以对节点进行删除,如下:
IE
<input type="button" value="clickMe" id="myButton">

<script. language="javascript">

document.getElementById("myButton").removeNode();

</script>

但是Mozilla中,没有这个方法,只能是先找到父节点,然后调用Dom方法removeChild才可以达到目的,如下:
IE&Moz
<input type="button" value="clickMe" id="myButton">

<script. language="javascript">

var Node = document.getElementById("myButton");

oNode.parentNode.removeChild(oNode);

</script>

2,交换节点
IE中有swapNode方法可以交换两个HTML元素节点,如下:
IE
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="javascript"> var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>

但是Mozilla中,没有这个方法,可以自己写函数实现,如下:
IE&Moz
<input type="button" value="first" id="firstButton"><input type="button" value="second" id="secondButton"><script. language="javascript"> if(window.Node) { Node.prototype.swapNode=function(node) { var nextSibling=this.nextSibling; var parentNode=this.parentNode; node.parentNode.replaceChild(this,node); parentNode.insertBefore(node,nextSibling); } } var First = document.getElementById("firstButton"); var Second = document.getElementById("secondButton"); oFirst.swapNode(oSecond);</script>

3,关于节点的插入
IE中,有insertAdjacentHTML和insertAdjacentElement两个好用的方法,如下:
IE
<div id="div1" style="border:1px solid black">div1<script. language="javascript"> var Div = document.getElementById("div1"); var htmlInput = "<input>"; oDiv.insertAdjacentHTML('beforeEnd',htmlInput);</script>

但是Mozilla中是没有这两个方法的,为了兼容它们,统一采用Dom的insertBefore方法,如下:
IE&Moz
<div id="div1" style="border:1px solid black">div1<script. language="javascript">

var Div = document.getElementById("div1");

var Element = document.createElement("input");

oElement.type = "text";

oDiv.insertBefore(oElement,null);

</script>

4,关于innerHTML和innerText
对于innerHTML,IE和Mozilla都是支持的,所以没什么问题,但是对于innerText,只有IE有,Moz是没有的
更多相关文章
IE和Firefox在JavaScript应用中的兼容性探讨
IE与Firefox在JavaScript上的7个不同写法小结
javascript css在IE和Firefox中区别分析
JS的IE和Firefox兼容性集锦

Javascript 相关文章推荐
Javascript Select操作大集合
May 26 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
Jul 01 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
JS高级运动实例分析
Dec 20 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
vue之封装多个组件调用同一接口的案例
Aug 11 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 #Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 #Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 #Javascript
网上应用的一个不错common.js脚本
Aug 08 #Javascript
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 #Javascript
比较详细的javascript对象的property和prototype是什么一种关系
Aug 06 #Javascript
You might like
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
PHP生成便于打印的网页
2006/10/09 PHP
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
看了就知道什么是JSON
2007/12/09 Javascript
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
浅析ES6的八进制与二进制整数字面量
2016/08/30 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
JavaScript中 ES6变量的结构赋值
2018/07/10 Javascript
菊花转动的jquery加载动画效果
2018/08/19 jQuery
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
vue实现数据控制视图的原理解析
2020/01/07 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
Python中List.count()方法的使用教程
2015/05/20 Python
21行Python代码实现拼写检查器
2016/01/25 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
python交互式图形编程实例(二)
2017/11/17 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
Python函数的定义方式与函数参数问题实例分析
2019/12/26 Python
tensorflow之自定义神经网络层实例
2020/02/07 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Html5 滚动穿透的方法
2019/05/13 HTML / CSS
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
师范生自荐信范文
2013/10/06 职场文书
社区学习雷锋活动总结
2014/04/25 职场文书
会计演讲稿范文
2014/05/23 职场文书