JavaScript event对象当前事件.docx
《JavaScript event对象当前事件.docx》由会员分享,可在线阅读,更多相关《JavaScript event对象当前事件.docx(6页珍藏版)》请在冰豆网上搜索。
JavaScriptevent对象当前事件
JavaScriptevent对象:
当前事件
event对象是JavaScript中一个非常重要的对象,用来表示当前事件。
event对象的属性和方法包含了当前事件的状态。
当前事件,是指正在发生的事件;状态,是与事件有关的性质,如引发事件的DOM元素、鼠标的状态、按下的键等等。
event对象只在事件发生的过程中才有效。
获取event对象
在W3C规范中,event对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式;但是对于IE8.0及其以下版本,event对象必须作为window对象的一个属性。
在遵循W3C规范的浏览器中,event对象通过事件处理函数的参数传入。
语法:
elementObject.OnXXX=function(e){
vareve=e;//声明一个变量来接收event对象
}上面绑定的事件处理函数中,参数e用来传入event对象,变量eve则表示当前事件。
这个过程是JavaScript自动完成的。
例如,要获取发生事件时鼠标的坐标,可以这样写:
<divid="demo">在这里单击</div><scripttype="text/javascript">document.getElementById("demo").onclick=function(e){vareve=e;varx=eve.x;//X坐标vary=eve.y;//Y坐标alert("X坐标:
"+x+"\nY坐标:
"+y);}</script>请看下面的演示:
在这里单击
(Chrome、FireFox、Opera、Safari、IE9.0及其以上版本)对于IE8.0及其以下版本,event必须作为window对象的一个属性。
语法:
elementObject.OnXXX=function(){
vareve=window.event;//声明一个变量来接收event对象
}例如,要取得发生事件时鼠标的坐标,可以这样写:
<divid="demo">在这里单击</div><scripttype="text/javascript">document.getElementById("demo").onclick=function(){vareve=window.event;varx=eve.x;//X坐标vary=eve.y;//Y坐标alert("X坐标:
"+x+"\nY坐标:
"+y);}</script>请看下面的演示:
在这里单击
(IE8.0及其以下)可以看出,要想获取与当前事件有关的状态,比如发生事件的DOM元素、鼠标坐标、键盘按键等,就要处理浏览器的兼容问题。
典型代码:
elementObject.OnXXX=function(e){
vareve=e||window.event;//使用||运算取得event对象
}这里要注意一点,||运算的返回值不一定是Boolean类型,当||运算的两个操作数中有一个为真时,将返回该操作数本身的值。
上面的代码,如果event随函数的参数传入,e为真,eve=e;如果作为window对象的属性,window.event为真,eve=window.event。
改进上面获取鼠标坐标的代码,使它兼容所有浏览器:
<divid="demo">在这里单击</div><scripttype="text/javascript">document.getElementById("demo").onclick=function(e){vareve=e||window.event;varx=eve.x;vary=eve.y;alert("X坐标:
"+x+"\nY坐标:
"+y);}</script>请看下面的演示:
在这里单击
(在所有浏览器下演示)
event对象常用属性和方法
event对象用来表示当前事件,事件有很多状态,例如,鼠标单击时的位置,按下键盘时的按键,发生事件的HTML元素,是否执行默认动作,是否冒泡等,这些都是作为event对象的属性和方法存在的。
要想获得相应的状态,就要访问对应的属性和方法。
event对象常用属性和方法(W3C规范)属性
描述
IE
非IE
W3CaltKey
返回当事件被触发时,"ALT"是否被按下。
Yes
Yes
Yesbutton
返回当事件被触发时,哪个鼠标按钮被点击。
Yes
Yes
YesclientX
返回当事件被触发时,鼠标指针的水平坐标。
Yes
Yes
YesclientY
返回当事件被触发时,鼠标指针的垂直坐标。
Yes
Yes
YesctrlKey
返回当事件被触发时,"CTRL"键是否被按下。
Yes
Yes
YesmetaKey
返回当事件被触发时,"meta"键是否被按下。
No
Yes
YesrelatedTarget
返回与事件的目标节点相关的节点。
No
Yes
YesscreenX
返回当某个事件被触发时,鼠标指针的水平坐标。
Yes
Yes
YesscreenY
返回当某个事件被触发时,鼠标指针的垂直坐标。
Yes
Yes
YesshiftKey
返回当事件被触发时,"SHIFT"键是否被按下。
Yes
Yes
Yesbubbles
返回布尔值,指示事件是否是起泡事件类型。
No
Yes
Yescancelable
返回布尔值,指示事件是否可拥可取消的默认动作。
No
Yes
YescurrentTarget
返回其事件监听器触发该事件的元素。
No
Yes
YeseventPhase
返回事件传播的当前阶段。
Yestarget
返回触发此事件的元素(事件的目标节点)。
No
Yes
YestimeStamp
返回事件生成的日期和时间。
No
Yes
Yestype
返回当前Event对象表示的事件的名称。
Yes
Yes
Yes方法
描述
IE
非IE
W3CinitEvent()
初始化新创建的Event对象的属性。
No
Yes
YespreventDefault()
通知浏览器不要执行与事件关联的默认动作。
No
Yes
YesstopPropagation()
不再派发事件。
No
Yes
Yes