3.5.3 事件对象

发表于 更新于 分类于 ， ， Waline： 本文字数： 2.7k 阅读时长 ≈ 2 分钟

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。