jQuery事件相关方法

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.运行结果