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").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").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("页面加载完成！");
});
$("#test1").on("click", { book: "疯狂前端开发讲义" }
, function (event) {
alert("id为test1的按钮被单击!\n" +
"事件为：" + event +
"\n事件上data的book属性为：" + event.data.book);
});
$("#test2").on("click", function (event) {
$("#check").trigger("click");
});
$("#test3").on("click", function (event) {
$("#tg").toggle("slow", "linear", function () {
console.log("动画完成！")
});
});
</script>
</body>
</html>
|