1.前言
如果使用原生JavaScript编程,在不同浏览器获取事件对象的方法并不相同。例如,在IE浏览器中,程序可通过隐式的、全局event对象来获取对象;在Firefor、Opera等浏览器中,程序则通过事件处理函数的第一个参数来获取事件。
jQuery消除了不同浏览器上事件差异。在jQuery中,事件对象总是作为参数传入事件处理函数,不仅如此,原生事件的大量属性也会被复制到jQuery的事件中。
jQuery事件大致包含了以下几种属性和方法:
1) currentTarget:代表在事件冒泡阶段中事件当前所处的DOM元素。
2) data:代表通过bind()、on()、delegate()等方法绑定事件处理函数时传入的data参数。
3) delegateTarget:返回在jQuery中绑定事件处理函数的对象
4) isDefaultPrevented():返回是否调用了事件对象的preventDefault()方法,即是否阻止了默认行为。
5) isImmediatePropagationStopped():返回是否调用了事件对象stopImmediatePropagation()方法,即是否立即 停止事件传播。
6) isPropagationStopped():返回是否调用事件对象的stopProgapation(),即是否阻止事件传播。
7) pageX:返回鼠标点击距离文档左边界的距离。
8) pageY:返回鼠标点距离文档边界的距离。
9) preventDefault():调用该方法阻止事件的默认行为。
10) relatedTarget:返回参与事件的所有其他DOM元素。
11) result:返回该事件触发的事件处理函数执行后的返回值。
12) stopImmediatePropagation():调用该方法立即停止事件传播。
13) stopPropagation():调用该方法停止事件传播。
14) target:返回触发该事件的初始化事件源。
15) timestamp:返回1970-01-01到浏览器创建该事件的时间差,以这毫秒为单位。
16) type:返回事件的类型。
17) which:对于鼠标 、键盘事件,该属性返回激发该事件的鼠标键或键盘键。
2.例子
下面开发了一个键盘控制“n飞机移动的例子,为了键盘控制飞机移动,程序需要根据激发键盘事件的按键进行相应处理。
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="OwenWilliam" />
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 访问jQuery事件对象 </title>
</head>
<body>
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 指定页面加载完成后执行该函数
$(function()
{
// 获取页面上包含飞机图片的div元素
var target = $("body>div:first");
// 为body元素的keydown事件绑定事件处理函数
$("body").keydown(function(event)
{
switch(event.which)
{
// 按下向左键
case 37:
target.offset({left:target.offset().left - 4
, top:target.offset().top});
break;
// 按下向上键
case 38:
target.offset({left:target.offset().left
, top:target.offset().top - 4});
break;
// 按下向右键
case 39:
target.offset({left:target.offset().left + 4
, top:target.offset().top});
break;
// 按下向下键
case 40:
target.offset({left:target.offset().left
, top:target.offset().top + 4});
break;
}
});
})
</script>
<div style="position:absolute;">
<img src="plane.png" alt="飞机"/></div>
</body>
</html>
3.运行结果