0%

3.5.3 事件对象

发表于 更新于 分类于 ， ，

3.5.3 事件对象

原生JavaScript编程中获取事假对象的方式

如果使用原生JavaScript编程,则在不同浏览器中获取事件对象的方法并不相同。例如:

  • 在IE浏览器中,可通过隐式的全局event对象来获取事件;
  • 在Firefox、Opera等浏览器中,则通过事件处理函数的第一个参数来获取事件。

jQuery中获取事件对象的方式

jQuery消除了不同浏览器上的事件差异。在jQuery中,事件对象总是作为参数被传入事件处理函数,不仅如此,原生事件的大量属性也会被复制到jQuery的事件中。

jQuery事件对象的属性和方法

jQuery事件大致包含了以下几种属性和方法。

事件对象的属性

方法 描述
currentTarget 表示在事件冒泡阶段中事件对象所处的DOM元素。
data 表示通过bind()、on()、delegate()等方法绑定事件处理函数时传入的data参数。
delegateTarget 返回在jQuery中绑定事件处理函数的对象。
pageX 返回鼠标指针距离文档左边界的距离。
pageY 返回鼠标指针距离文档上边界的距离。
relatedTarget 返回参与该事件的所有其他DOM元素。
result 返回该事件触发的事件处理函数执行后的返回值。
target 返回触发该事件的初始事件源。
timeStamp 返回1970-01-01到浏览器创建该事件时的时间差,以毫秒(ms)为单位。
type 返回事件的类型。
which 对于鼠标、键盘事件,该属性返回激发该事件的鼠标键或键盘键。
### 事件对象的方法 ###
方法 描述
isDefaultPrevented() 判断是否调用了事件对象的preventDefault()方法,即是否阻止了默认行为。
isImmediatePropagationStopped() 判断是否调用了事件对象的stopImmediatePropagation()方法,即是否立即停止事件传播。
isPropagationStopped() 判断是否调用了事件对象的stopPropagation()方法,即是否阻止事件传播。
preventDefault() 调用该方法阻止事件的默认行为。
stopImmediatePropagation() 调用该方法立即停止事件传播。
stopPropagation() 调用该方法停止事件传播。

程序示例

下面是一个用键盘控制”飞机移动”的小例子,为了让键盘控制飞机移动,需要根据激发键盘事件的按键进行相应处理。下面是该示例的代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>

<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 访问jQuery事件对象 </title>
</head>

<body>
	<div style="position:absolute;">
		<img src="plane.png" alt="飞机" />
	</div>

	<script type="text/javascript" src="../jquery-3.1.1.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>
</body>

</html>

在浏览器中浏览该页面,并单击键盘上的”上、下、左、右”按键,即可控制屏幕上飞机的移动。

除此之外,JavaScript原生事件的下列属性也会被复制到jQuery事件中:altKey、bubbles、button、cancelable、charCode、clientX、clientY、ctrlKey、currentTarget、data、detail、eventPhase、metaKey、offsetX、offsetY、originalTarget、pageX、pageY、prevValue、relatedTarget、screenX、screenY、shiftKey、target、view、which。当然,由于并不是所有事件都具备上面列出的全部属性,因此使用jQuery事件对象来访问上面属性时也可能返回undefined。

原文链接: 3.5.3 事件对象