浏览器中的事件是以对象的形式存在,而在获取事件对象时,IE浏览器和标准DOM浏览器之间是存在差异,在IE中事件对象是window对象的一个属性event,访问时通常采用如下的方法:
oP.onclick=function(){var oEvent=window.event;}
而在标准DOM浏览器中规定event对象必须作为唯一的参数传给事件处理函数,因此在该类浏览器中访问事件对象通常将其作为参数,代码:oP.onclick=function(event){},但是为了兼容两种浏览器,通常采用下面的方法:
oP.onclick=function(event){if(window.event)var oEvent=window.event;}
在浏览器获取事件对象后就可以通过它的一系列属性和方法来处理各种具体事件,下面为大家罗列事件常用的属性和方法,供大家在使用时查询。
事件常用的属性和方法 |
||||
IE |
标准DOM |
类型 |
可读/可写 |
说明 |
altKey |
altKey |
Boolean |
R/W |
按下Alt键则为true,否则为false |
button |
button |
Integer |
R/W |
鼠标事件,值对应按下的鼠标键 |
cancelBubble |
cancelBubble |
Boolean |
IE中 R/W,标准DOM中R |
IE中设置为true可取消事件向上冒泡,标准DOM中只读 |
— |
stopPropagation() |
Function |
N/A |
可以调用该方法来阻止事件向上冒泡 |
clientX |
clientX |
Integer |
IE中 R/W,标准DOM中R |
鼠标指针在客户端区域的坐标,不包括工具栏、滚动条等 |
clientY |
clientY |
|||
ctrlKey |
ctrlKey |
Boolean |
同上 |
按下Ctrl键则为true,否则为false |
fromElement |
relatedTarget |
Element |
同上 |
鼠标指针所离开的元素 |
toElement |
relatedTarget |
Element |
同上 |
鼠标指针正在进入的元素 |
— |
charCode |
Integer |
R
|
按下按键的Unicode值 |
keyCode |
keyCode |
Integer |
R/W |
IE中keypress事件表示按下按键的Unicode值,keydown/keyup事件为按键的数字代号。标准DOM中keypress时为0,其余为按下按键的数字代号 |
— |
detail |
Integer |
R |
鼠标按键被单击的次数 |
returnValue |
— |
Boolean |
R/W |
设置为false时可取消事件的默认行为 |
— |
preventDefault() |
Function |
N/A |
可以调用该方法来阻止事件的默认行为 |
shiftKey |
shiftKey |
Boolean |
IE中 R/W,标准DOM中R |
按下Shift键则为true,否则为false |
srcElement |
target |
Element |
同上 |
引起事件的元素/对象 |
type |
type |
String |
同上 |
事件的名称,返回值如:click等 |
screenX |
screenX |
Integer |
同上 |
鼠标指针相对于整个计算机屏幕的坐标值 |
screenX |
screenX |
从表中我们可以看出两类浏览器处理事件还是有一些相似之处,例如type属性便是各种浏览器所兼容的,它表示获取的时间类型,这对于同一个函数处理多种时间十分有用,如:
<html>
<head>
<title>事件的类型</title>
<script language=“javascript”>
function handle(oEvent){
var oDiv = document.getElementById(“display”);
if(window.event) oEvent = window.event;//处理兼容性,获得事件对象
if(oEvent.type == “click”)//检测事件名称
oDiv.innerHTML += “你点击了我  ”;
else if( oEvent.type == “mouseover”)
oDiv.innerHTML += “你移动到我上方了  ”;
}
window.onload = function(){
var oImg = document.getElementsByTagName(“img”)[0];
oImg.onclick = handle;
oImg.onmouseover = handle;
}
</script>
</head>
<body>
<img src=“01.jpg” border=“0”>
<div id=“display”></div>
</body>
</html>
结果如图:
还要注意的是在表中提到的获取鼠标指针位置的方法中坐标的原点都是各自的左上角,x轴的正方向为从左到右,y轴的正方向为从上到下。
下面在给大家讲解下获取事件的目标,由于事件目标的属性在两种浏览器是不同的,因此在写代码的时候首先必须保证兼容,通常的做法就是直接将对象作为if语句的条件,这种方法在其他属性中也是比较常用的,代码如下:
<html>
<head>
<title>事件的目标</title>
<script language=“javascript”>
function handle(oEvent){
if(window.event) oEvent = window.event;//处理兼容性,获得事件对象
var oTarget;
if(oEvent.srcElement)//处理兼容性,获取事件目标
oTarget = oEvent.srcElement;
else
oTarget = oEvent.target;
alert(oTarget.tagName);//弹出目标的标记名称
}
window.onload = function(){
var oImg = document.getElementsByTagName(“img”)[0];
oImg.onclick = handle;
}
</script>
</head>
<body>
<img src=“02.jpg” border=“0”>
</body>
</html>