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


jquery 使用捕获事件 jquery获取事件源_事件对象