3.5 jQuery事件相关方法 3.5.1 绑定事件处理函数

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

3.5 jQuery事件相关方法

jQuery对JavaScript事件模型进行了简化,提供了一致的事件模型,从而允许开发者以更简洁的方式进行事件编程。

3.5.1 绑定事件处理函数

jQuery为事件编程提供了如下方法。

事件处理方法介绍

ready方法

方法 描述
ready(function()) 指定当jQuery所对应的DOM对象装载完成时执行function()函数。在function函数中可以为jQuery函数起个别名,这样可避免多个JavaScript库并存时的命名冲突。

这个函数一个常见的使用场景是$(document).ready(function(){...});,这行代码指定在页面装载完成时立即执行ready()方法里指定的函数。

  • 值得指出的是,一定要保证在<body>元素中没有指定onload属性,否则不会触发$(document).ready()里指定的函数。
  • 同一个页面中可以无限次地调用$(document).ready()方法,多次注册的函数会按照(代码中的)先后顺序依次执行。

on方法

方法 描述
on(events [,selector] [,data],function(eventObject)) 为当前jQuery对象中匹配selector的所有子元素的一个或多个事件**绑定事件处理函数handler**。

其中事假处理函数handler是一个形如function(event){}的函数,其中event 表示触发该函数的事件;data 是个可选参数,它是个形如{key1:value1,key2:value2...}的对象。函数function可通过event.data来访问data对象,通过指定data,可以向事件处理函数传入更多数据。

对于on方法的时间处理函数handler,

  • 如果该函数想同时阻止事件的默认行为和事件冒泡,则让该函数返回false 即可;
  • 如果只想取消默认行为,则调用event 的preventDefault()方法即可;
  • 如果只想阻止冒泡,则调用event的stopPropagation()方法即可。

off方法

方法 描述
off(events [,selector] [,handler(eventObject)]) 这是on()方法的反向操作,它用于从当前jQuery对象包含的DOM元素中删除绑定的事件处理函数。该函数的selector、handler两个参数都是可选的,如果没有指定任何参数,则删除jQuery对象中所有DOM元素上的事件处理函数;如果指定了selector,则只删除匹配selector的DOM元素上的事件处理函数;如果指定了handler,则只删除该事件处理函数。

unbind方法

unbind()方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。ubind()适用于任何通过jQuery附加的事件处理程序。

没有参数的情况

如果没有规定参数,unbind() 方法会删除指定元素的所有事件处理程序。
代码示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).slideToggle();
  });
  $("button").click(function(){
    // 移除p元素上的所有事件处理程序
    $("p").unbind();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以令其消失。包括本段落。</p>
<button>删除 p 元素的事件处理器</button>
</body>
</html>

两个参数的情况

方法 描述
$(selector).unbind(event,functionName) event参数是可选的,event参数规定删除元素的一个或多个事件,由空格分隔多个事件值。如果只规定了该参数,则会删除绑定到指定事件的所有函数。functionName可选。规定从元素的指定事件取消绑定的函数名。
代码实例: 
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
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
function alertMe()
{
alert("Hello World!");
}

$(document).ready(function(){
        //给p元素设置一个点击事件处理程序
        $("p").click(alertMe);
        $("button").click(function(){
        $("p").unbind("click",alertMe);
    });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任何段落可以触发一个提示框。包括本段落。</p>
<button>从 p 元素的 click 事件删除提示框函数</button>
</body>
</html>

Event对象来作为参数的情况

方法 描述
$(selector).unbind(eventObject) 这个eventObject参数是一个Event对象,一般来自事件绑定函数,该方法用于对自身内部的事件取消绑定(比如当事件已被触发一定次数之后,删除事件处理程序)
程序示例: 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var x=0;
  $("p").click(function(e){
    $("p").animate({fontSize:"+=5px"});
    x++;
    if (x>=2)
      {
      $(this).unbind(e);
      }
  });
});
</script>
</head>
<body>
<p style="font-size:20px;">点击这个段落可以增加其大小。只能增加两次。</p>
</body>
</html>

注意
jQuery 3.0删除了bind()方法、delegate()方法,使用on()方法来代替这两个方法,删除了unbind()方法、undelegate()方法,使用off()方法来代替这两个方法。

one方法

方法 描述
one(type,data,function) 该方法与bind()方法的作用基本一致。与bind的区别是,无论如何,one绑定的事件处理函数只会执行一次。也就是说,使用one()绑定的事件处理函数被激发一次后,jQuery将会解除one()方法绑定的事件处理函数。

trigger方法

方法 描述
trigger(type,[data]) 以编程方式触发当前jQuery对象包含的所有DOM对象上的type事件,该方法可以触发由bind()绑定的自定义事件。除此之外,该函数也会导致DOM元素执行同名的事件动作。

例如我们使用trigger()触发一个表单的submit 事件,则该表单将会被提交(如果要阻止这种默认行为,可让事件处理函数返回false)。data是一个可选的数组类型的参数,可以将该参数传给绑定在DOM对象上的事件处理函数。

triggerHandler方法

方法 描述
triggerHandler(type,[data]) 该方法与trigger的作用基本相似,只是调用该方法来触发type事件时,不会导致DOM元素执行同名的事件动作。

hover方法

方法 描述
hover(over,out) 该方法为当前jQuery对象包含的每个DOM 元素的**onmouseover、onmouseout事件**绑定事件处理函数。其中over、out都是函数,分别绑定到onmouseover、onmouseout事件上作为事件处理函数。

toggle方法

方法 描述
toggle([speed],[easing],[function]) 切换jQuery对象包含的DOM 元素的显示/隐藏状态。其中speed参数指定”隐藏/显示”动画效果的速度,默认是0ms,可能的值包括slow、normal、fast;easing参数指定切换效果,默认是swing字符串,也可指定为linear字符串。function为在动画完成时执行的函数,每个元素的动画完成后执行一次function函数。此外,该方法还支持传入一个boolean参数值,用于控制元素的显示、隐藏,其中true表示显示,false表示隐藏。

程序示例

下面的程序示范了以上几个绑定事件处理函数的用法。

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
<!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 />
    <input id="test2" type="button" value="切换右边复选框的勾选状态" />
    <input id="check" type="checkbox" value="" />
    <br />
    <input id="test3" type="button" value="激发toggle" />
    <br />
    <div id="tg" style="width:300px;height:120px;background-color:gray;">
    </div>

    <script type="text/javascript" src="../jquery-3.1.1.js">
    </script>
    <script type="text/javascript">
        // 指定页面加载完成时执行指定函数
        $(document).ready(function () {
            alert("页面加载完成！");
        });

        // 为id为test1的元素的click事件绑定事件处理函数
        $("#test1").on("click", { book: "疯狂前端开发讲义" }
            , function (event) {
                alert("id为test1的按钮被单击!\n" +
                    "事件为：" + event +
                    "\n事件上data的book属性为：" + event.data.book);
            });

        // 为id为test2的元素的click事件绑定事件处理函数
        $("#test2").on("click", function (event) {
            // 使用代码触发id为check的元素的单击事件，而且执行默认行为
            $("#check").trigger("click");
        });
        
        // 使用toggle为id为test3的元素绑定3个事件处理函数。
        $("#test3").on("click", function (event) {
            // 切换id为tg的元素的显示/隐藏状态
            $("#tg").toggle("slow", "linear", function () {
                console.log("动画完成！")
            });
        });
    </script>
</body>

</html>