3.5.2 特定事件相关的方法

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

3.5.2 特定事件相关的方法

除了上面介绍的通用的绑定事件处理函数之外,jQuery 还提供了大量与特定事件相关的函数,如表3.1所示。

特定设备 绑定事件处理函数
鼠标 click()，dblclick()，hover(),
mousedown(),mouseup(),
mouseenter(),mouseleave(),mousemove(),mouseout(),mouseover(),
focusin(),focusout()
键盘 focusin(),focusout(),keydown(),keypress(),keyup()
表单 blur(),change(),focus(),select(),submit()
HTML文档 load(),ready(),unload()
浏览器 resize(),scroll()

绑定事件处理函数的语法都遵循.xxx([eventData],handler(eventObject))的格式。

程序示例

下面的程序示范了如何为特定事件绑定事件处理函数。

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
<!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> 具体事件相关的方法 </title>
</head>

<body>
    <input id="test1" type="button" value="单击我" />
    <br />
    <div id="test2">
        鼠标悬停、移除将触发指定函数
    </div>

    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">

        $("#test1").click(function (event) {
            console.log("id为test1的按钮被单击" + event)
        }).click();


        $("#test2").css("border", "1px solid black")
            .css("background-color", "#cccccc")
            .width(200)
            .height(80)
            // 使用hover为id为test2的元素绑定2个事件处理函数
            // 当鼠标移入该元素时触发第一个函数，移出该元素时触发第二个函数
            .hover(function (event) {
                console.log("鼠标移入该元素之内！");
            },
                function () {
                    console.log("鼠标移出该元素！");
                });
    </script>
</body>

</html>

事件处理方法的两种调用形式

调用jQuery 提供的click、blur、change、dblclick等这些方法时,

  • 如果传入的参数是一个函数,则表示注册该事件的事件处理函数,
  • 如果没有传入参数,则表示触发该事件。