1.Event使用
IE可以直接使用event对象,但其他引擎不可以直接使用。
<input type="button"onclick="doIt">
<script>
function doIt{
alert(event);
}
</script>
上面代码在Firefox等浏览器中不能正常工作,这是因为Firefox浏览器中没有默认的event对象,只能在事件发生的现场使用event对象。兼容的方法如下:
<input type="button"onclick="doIt(event)">
<script>
function doIt(oEvent){
alert(oEvent);
}
</script>
2.event.srcElement[IE]和event.target[Moz]
在Firefox等引擎下的event.target相当于IE下的event.srcElement,不过在细节上有区别,event.srcElement返回一个Html Element,而event.target返回的是个节点,该节点包括文本节点。比较下面示例代码的区别和联系。
(1)IE使用event.srcElement
<table border="1"onclick="doIt">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<script>
function doIt{
alert(event.srcElement.tagName);
}
</script>
(2)非IE浏览器使用event.target
<table border="1"onclick="doIt">
<tr><td>1</td><td>2</td></tr>
<tr><td>3</td><td>4</td></tr>
</table>
<script>
function doIt(oEvent){
var Target=oEvent.target;
while(oTarget.nodeType!=1)
Target=oTarget.parentNode;
alert(oTarget.tagName);
}
</script>
3.获取键盘值
不同引擎获取键盘值的途径和方法是不同的。
(1)IE使用event.keyCode
<input type="text"onkeypress="doIt">
<script>
function doIt{
alert(event.keyCode);
}
</script>
(2)非IE浏览器使用event.which
<input type="text"okeypress="doIt(event)">
<script>
function doIt(oEvent){
alert(oEvent.which)
}
</script>
4.获取鼠标指针的绝对位置
IE通过event对象的event.x和event.y属性获取鼠标指针的绝对位置,而Firefox等引擎通过event对象的event.pageX和event.pageY获取鼠标指针的绝对位置。例如,通过如下方法可以兼容不同引擎的用法。
<ponclick="doIt(event)">
<script>
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.获取鼠标指针的相对位置
IE通过event对象的event.offsetX和event.offsetY属性获取鼠标指针的相对位置,而Firefox等引擎通过event对象的event.layerX和event.layerY获取鼠标指针的相对位置。例如,通过如下方法可以兼容不同引擎的用法。
<ponclick="doIt(event)">
<script>
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.绑定事件
IE通过attachEvent、detachEvent方法为DOM对象绑定事件、注销事件,而Firefox等引擎通过addEventListener、removeEventListener方法为DOM对象绑定事件、注销事件。
(1)IE
<input type="button"id="testBT">
<script>
var oButton=document.getElementById("testBT");
oButton.attachEvent("onclick",clickEvent);
function clickEvent{
alert("Hello,World!");
}
</script>
(2)Firefox
<input type="button"id="testBT">
<script>
var oButton=document.getElementById("testBT");
oButton.addEventListener("click",clickEvent,true);
function clickEvent{
alert("Hello,World!");
}
</script>
注意,在IE中要在事件前加on前缀,而在Firefox等引擎中不用加。
7.获取事件目标源
在IE下,event对象使用srcElement属性获取当前事件的目标元素,不支持target属性。而其他引擎正好相反,event对象使用target属性获取当前事件的目标元素,不支持srcElement属性。可以使用下面代码进行兼容。
obj=event.srcElement?event.srcElement:event.target;