事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
获取event对象:
所有浏览器都支持event对象,但在DOM2中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。
event对象的属性:
获得事件类型:
type:用于获取事件类型
获得事件源.
事件源:触发事件的元素,即事件的目标节点。
- IE浏览器:event.srcElement
- FireFox:event.target
- Chrome都支持
target:触发事件的某个具体对象
currentTarget:绑定事件的对象,恒等于this
//考虑浏览器的兼容性:
document.onclick=function(evt){
var e=evt||window.event;
var obj=e.srcElement || e..target;
alert(obj.nodeName);
}
获得鼠标信息:
- 鼠标按钮信息:
主鼠标按钮是鼠标左键,中间的鼠标按钮是鼠标滚轮,次鼠标按钮是鼠标右键。
对于mousedown和mouseup事件,其event对象存在一个button属性:
在w3c中,返回的属性值为0,表示按下或释放了主鼠标按钮;返回的属性值为1,表示按下或释放了中间的鼠标按钮;返回的属性值为2,表示按下或释放了次鼠标按钮。
在IE中,返回的属性值为0,表示没有按下或释放鼠标按钮;返回的属性值为 1,表示按下或释放了主鼠标按钮;返回的属性值为2,表示按下或释放了次鼠标按钮;返回的属性值为3,表示同时按下或释放了主、次鼠标按钮;返回的属性值为4,表示按下或释放了中间的鼠标按钮;返回的属性值为5,表示同时按下或释放了主鼠标按钮和中间的鼠标按钮;返回的属性值为6,表示同时按下或释放了次鼠标按钮和中间的鼠标按钮;返回的属性值为7,表示同时按下或释放了三个鼠标按钮。一般只使用主次中三个单击键。
//跨浏览器鼠标按钮
function getButton(evt){
var e=evt||window.event;
if(evt){
return e.button;
}else if(window.event){
switch(e.button){
case 1:return 0;
case 4:return 1;
case 2:return 2;
}
}
}
window.function(){
if(alert(getButton(evt))==0){
alert(“左键”);
}else if(alert(getButton(evt))==1){
alert(“中键”);
} if(alert(getButton(evt))==2){
alert(“右键”);
}
}
- 屏幕坐标信息:
- clientX和clientY:表示事件发生时鼠标指针在视口中的水平和垂直坐标,即是以浏览器滑动条此刻滑动到的位置为参考点(也就是不包括页面滚动的距离)。
//想要加上因为滑动而隐藏起来的距离,可以 e.PageX=e.clientX+document.documentElement.scrollLeft e.PageY=e.clientY+document.documentElement.scrollTop(标准模式适用于火狐,IE); e.pageX=e.clientX+document.body.scrollLeft e.pageY=e.clientY+document.body.scrollTop(混杂模式,适用于谷歌)
- pageX/pageY:鼠标在页面上的位置。即坐标是从页面本身而非视口的左边和顶边计算的.在页面没有滚动的情况下,pageX,pageY和clientX,clientY的值相等.Ie8及更早版本不支持.
- screenX/screenY:鼠标在屏幕上的位置,从整个屏幕左上角开始。
- 鼠标滚轮信息:
wheelDelta:当用户向前滚动鼠标滚轮时,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮时,wheelDelta是-120的倍数.
兼容性:Opera9.5之前的版本,wheelDelta值的正负号是颠倒的.
获得键盘信息:
- 键码:在发生keydown和keyup事件时,event对象的keyCode属性中会包含一个代码,与键盘上一个特定的键对应。
键码可以返回任意键的编键码,而且字母不区分大小写。在任何浏览器都兼容。
键码:键盘上的任意键。 字符编码:键盘上可以输出字符的键。
- 字符编码:在发生keypress事件时,FireFox,Chrome,Safari的event对象的charCode属性中会包含一个值,这个值就是按下的那个字符键所代表字符的ASCII编码。
字母区分大小写。
IE和Opera不支持charCode属性,弹出undefined.
//兼容代码,一般处理的都是字符按键
function getCharCode(evt){
var e=evt||window.event;
if(typeOf e.charCode==’number’){
return e.charCode;//FireFox,Chrome,Safari
}else{
rerurn e.keyCode;//IE,Opera
}
}
document.function(){
document.onkeypress=function(evt){
alert(getCharCode(evt));
}
}