IE和firefox浏览器的event事件兼容性汇总


Posted in Javascript onDecember 06, 2009
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 相关文章推荐
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
CSS3实现动态背景登录框的代码
Jul 28 Javascript
JS表单验证的代码(常用)
Apr 08 Javascript
AngularJS入门示例之Hello World详解
Jan 04 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
Apr 25 jQuery
jQuery使用bind函数实现绑定多个事件的方法
Oct 11 jQuery
详解vue中点击空白处隐藏div的实现(用指令实现)
Apr 19 Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
Jun 05 Javascript
JavaScript中变量提升和函数提升的详解
Aug 07 Javascript
js 操作select相关方法函数
Dec 06 #Javascript
JavaScript 对象模型 执行模型
Dec 06 #Javascript
ASP Json Parser修正版
Dec 06 #Javascript
jquery ready函数源代码研究
Dec 06 #Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 #Javascript
javascript 动态生成私有变量访问器
Dec 06 #Javascript
JavaScript 加号(+)运算符号
Dec 06 #Javascript
You might like
关于PHP5 Session生命周期介绍
2010/03/02 PHP
php实现图片缩放功能类
2013/12/18 PHP
两千行代码的PHP学习笔记汇总
2014/10/05 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
RxJS的入门指引和初步应用
2019/06/15 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
2020/05/09 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python处理json数据中的中文
2014/03/06 Python
Python3.x版本中新的字符串格式化方法
2015/04/24 Python
pip安装Python库时遇到的问题及解决方法
2017/11/23 Python
基于python3实现socket文件传输和校验
2018/07/28 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python定义函数时参数有默认值问题解决
2019/12/19 Python
python离线安装外部依赖包的实现
2020/02/13 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
iRobot官网:改变生活的家用机器人品牌
2016/09/20 全球购物
水果花束:Fruit Bouquets
2017/12/20 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
给儿子的表扬信
2014/01/15 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
java设计模式--建造者模式详解
2021/07/21 Java/Android
利用Python多线程实现图片下载器
2022/03/25 Python