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+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JS option location 页面跳转实现代码
Dec 27 Javascript
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
JavaScript获得表单target属性的方法
Apr 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
对vue中v-if的常见使用方法详解
Sep 28 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
收藏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
简单的php写入数据库类代码分享
2011/07/26 PHP
php查询操作实现投票功能
2016/05/09 PHP
ASP SQL防注入的方法
2008/12/25 Javascript
jquery下异步提交表单 异步跨域提交表单
2010/11/17 Javascript
js的写法基础分析
2011/01/17 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
2013/11/20 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
jquery实现炫酷的叠加层自动切换特效
2015/02/01 Javascript
jQuery晃动层特效实现方法
2015/03/09 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
Python列表list数组array用法实例解析
2014/10/28 Python
python实现的希尔排序算法实例
2015/07/01 Python
PyQt5每天必学之带有标签的复选框
2018/04/19 Python
python实现AES和RSA加解密的方法
2019/03/28 Python
Python实现时间序列可视化的方法
2019/08/06 Python
tensorflow 初始化未初始化的变量实例
2020/02/06 Python
Python中sys模块功能与用法实例详解
2020/02/26 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
python3跳出一个循环的实例操作
2020/08/18 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
高职助产应届生自荐信
2013/09/24 职场文书
跟单文员岗位职责
2014/01/03 职场文书
表彰大会策划方案
2014/05/13 职场文书
2015年毕业生自我鉴定模板
2014/09/19 职场文书
布达拉宫的导游词
2015/02/02 职场文书
车辆安全隐患排查制度
2015/08/05 职场文书
大学生暑期实践报告之企业经营管理
2019/08/08 职场文书