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 + "Y:" + 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 + "Y:" + 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是没有的。
相关文章: