当前事件,是指正在发生的事件;状态,是与事件有关的性质,如 引发事件的DOM元素、鼠标的状态、按下的键等等。
event 对象只在事件发生的过程中才有效。
获取event对象
在 W3C 规范中,event 对象是随事件处理函数传入的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持这种方式;但是对于 IE8.0 及其以下版本,event 对象必须作为 window 对象的一个属性。◆ 在遵循 W3C 规范的浏览器中,event 对象通过事件处理函数的参数传入。
语法:
elementObject.OnXXX=function(e){
var eve=e; // 声明一个变量来接收 event 对象
}
上面绑定的事件处理函数中,参数 e 用来传入 event 对象,变量 eve 则表示当前事件。这个过程是 JavaScript 自动完成的。
例如,要获取发生事件时鼠标的坐标,可以这样写:
<div id="demo">在这里单击</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve=e; var x=eve.x; // X坐标 var y=eve.y; // Y坐标 alert("X坐标:"+x+"\nY坐标:"+y); } </script>
请看下面的演示:
在这里单击
(Chrome、FireFox、Opera、Safari、IE9.0及其以上版本)
(Chrome、FireFox、Opera、Safari、IE9.0及其以上版本)
◆ 对于 IE8.0 及其以下版本,event 必须作为 window 对象的一个属性。
语法:
elementObject.OnXXX=function(){
var eve=window.event; // 声明一个变量来接收event对象
}
例如,要取得发生事件时鼠标的坐标,可以这样写:
<div id="demo">在这里单击</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ var eve=window.event; var x=eve.x; // X坐标 var y=eve.y; // Y坐标 alert("X坐标:"+x+"\nY坐标:"+y); } </script>
请看下面的演示:
在这里单击
(IE8.0及其以下)
(IE8.0及其以下)
可以看出,要想获取与当前事件有关的状态,比如发生事件的DOM元素、鼠标坐标、键盘按键等,就要处理浏览器的兼容问题。
典型代码:
elementObject.OnXXX=function(e){
var eve = e || window.event; // 使用 || 运算取得event对象
}
这里要注意一点, || 运算的返回值不一定是 Boolean 类型,当 || 运算的两个操作数中有一个为真时,将返回该操作数本身的值。上面的代码,如果 event 随函数的参数传入,e 为真,eve=e;如果作为 window 对象的属性,window.event 为真,eve=window.event 。
改进上面获取鼠标坐标的代码,使它兼容所有浏览器:
<div id="demo">在这里单击</div> <script type="text/javascript"> document.getElementById("demo").onclick=function(e){ var eve = e || window.event; var x=eve.x; var y=eve.y; alert("X坐标:"+x+"\nY坐标:"+y); } </script>
请看下面的演示:
在这里单击
(在所有浏览器下演示)
(在所有浏览器下演示)
event对象常用属性和方法
event 对象用来表示当前事件,事件有很多状态,例如,鼠标单击时的位置,按下键盘时的按键,发生事件的HTML元素,是否执行默认动作,是否冒泡等,这些都是作为event对象的属性和方法存在的。要想获得相应的状态,就要访问对应的属性和方法。属性 | 描述 | IE | 非IE | W3C |
---|---|---|---|---|
altKey | 返回当事件被触发时,"ALT" 是否被按下。 | Yes | Yes | Yes |
button | 返回当事件被触发时,哪个鼠标按钮被点击。 | Yes | Yes | Yes |
clientX | 返回当事件被触发时,鼠标指针的水平坐标。 | Yes | Yes | Yes |
clientY | 返回当事件被触发时,鼠标指针的垂直坐标。 | Yes | Yes | Yes |
ctrlKey | 返回当事件被触发时,"CTRL" 键是否被按下。 | Yes | Yes | Yes |
metaKey | 返回当事件被触发时,"meta" 键是否被按下。 | No | Yes | Yes |
relatedTarget | 返回与事件的目标节点相关的节点。 | No | Yes | Yes |
screenX | 返回当某个事件被触发时,鼠标指针的水平坐标。 | Yes | Yes | Yes |
screenY | 返回当某个事件被触发时,鼠标指针的垂直坐标。 | Yes | Yes | Yes |
shiftKey | 返回当事件被触发时,"SHIFT" 键是否被按下。 | Yes | Yes | Yes |
bubbles | 返回布尔值,指示事件是否是起泡事件类型。 | No | Yes | Yes |
cancelable | 返回布尔值,指示事件是否可拥可取消的默认动作。 | No | Yes | Yes |
currentTarget | 返回其事件监听器触发该事件的元素。 | No | Yes | Yes |
eventPhase | 返回事件传播的当前阶段。 | Yes | ||
target | 返回触发此事件的元素(事件的目标节点)。 | No | Yes | Yes |
timeStamp | 返回事件生成的日期和时间。 | No | Yes | Yes |
type | 返回当前 Event 对象表示的事件的名称。 | Yes | Yes | Yes |
方法 | 描述 | IE | 非IE | W3C |
initEvent() | 初始化新创建的 Event 对象的属性。 | No | Yes | Yes |
preventDefault() | 通知浏览器不要执行与事件关联的默认动作。 | No | Yes | Yes |
stopPropagation() | 不再派发事件。 | No | Yes | Yes |
除了上面W3C规范所规定的属性和方法外,IE浏览器还支持以下属性。
属性 | 描述 |
---|---|
cancelBubble | 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。 |
fromElement | 对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。 |
keyCode | 对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 |
offsetX,offsetY | 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 |
returnValue | 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。 |
srcElement | 对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 |
toElement | 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。 |
x,y | 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。 |