事件与事件对象（三）_事件与对象-CSDN博客

本文链接：https://blog.csdn.net/ghycn/article/details/5874720

五、快捷事件 Event Helpers

BUG提示:jquery-1.3.2-vsdoc2.js 这个最新的官方带智能提示的类库, 无法使用快捷事件, 比如click(), focus(). 使用其他版本的类库则没有问题.

虽然我们可以使用事件处理函数完成对象事件的几乎所有操作, 但是jQuery提供了对常用事件的封装. 比如单击事件对应的两个方法click()和click(fn)分别用来触发单击事件和设置单击事件.

设置单击事件:

1 $("#testDiv").click(function(event) { alert("test div clicked ! "); });

等效于:

1 $("#testDiv").bind("click", function(event) { alert("test div clicked ! "); });

触发单击事件:

1 $("#testDiv").click();

等效于：

1 $("#testDiv").trigger("click");

注意这里等效的是trigger而不是triggerHandler.

下面是jQuery的快捷方法列表(都是对应的事件):

名称1 名称2
名称3

blur( ) keypress( ) select( )
blur( fn ) keypress( fn ) select( fn )
change( ) keyup( ) submit( )
change( fn ) keyup( fn ) submit( fn)
click( ) load( fn ) unload( fn )
click( fn ) mousedown( fn ) resize( fn )
dblclick( ) mouseenter( fn ) scroll( fn )
dblclick( fn ) mouseleave( fn ) keydown( )
error( ) mousemove( fn ) keydown( fn )
error( fn ) mouseout( fn ) mouseup( fn )
focus( ) focus( fn ) mouseover( fn )

六、交互帮助方法

除了基本的实践, jQuery提供了两个和事件相关的帮助方法: hover( over, out ) 和 toggle( fn, fn2, fn3,fn4,... )

1. hover( over, out )

hover函数主要解决在原始javascript中mouseover和mouseout函数存在的问题, 看下面这个示例:

有两个div(红色区域), 里面分别嵌套了一个div(黄颜色区域). HTML代码如下:

1 <div class="outer" id="outer1">
2     Outer 1
3     <div class="inner" id="inner1">Inner 1</div>
4 </div>
5 <div class="outer" id="outer2">
6     Outer 2
7     <div class="inner" id="inner2">Inner 2</div>
8 </div>
9 <div id="console"></div>

绑定如下事件:

1 <script type="text/javascript">
2     function report(event) {
3         $('#console').append('<div>'+event.type+'</div>');
4     }
5     $(function(){
6         $('#outer1').bind('mouseover',report).bind('mouseout',report);
7         $('#outer2').hover(report,report);
8     });
9 </script>

uter1我们使用了mouseover和mouseout事件, 当鼠标从Outer1的红色区域移动到黄颜色区域时, 会发现虽然都是在outer1的内部移动, 但是却触发了mouseout事件:

很多时候我们不希望出现上图的结果, 而是希望只有鼠标在Outer1内部移动时不触发事件, Outer2使用Hover()函数实现了这个效果:

注意这里的事件名称进入叫做"mouseenter", 离开叫做"mouseleave", 而不再使用"mouseover"和"mouseleave"事件.

有经验的开发人员会立刻想到在制作弹出菜单时, 经常遇到这个问题: 为弹出菜单设置了mouseout事件自动关闭, 但是鼠标在弹出菜单内移动时常常莫名其妙触发mouseout事件让菜单关闭. hover()函数帮助我们很好的解决了这个问题.

2. toggle( fn, fn2, fn3,fn4,... )

toggle函数可以为对象添加click事件绑定函数, 但是设置每次点击后依次的调用函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。

可以使用unbind("click")来删除。

下面的示例演示如何使用toggle函数:

1 <!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4     <title>toggle example</title>
5     <link rel="stylesheet" type="text/css" href="css/hover.css">
6     <script type="text/javascript" src="scripts/jquery‐1.3.2‐vsdoc2.js"></script>
7     <script type="text/javascript">
8     $(function()
9     {
10         $("li").toggle(
11             function()
12             {
13             $(this).css({ "list‐style‐type": "disc", "color": "blue" });
14             },
15             function()
16             {
17             $(this).css({ "list‐style‐type": "square", "color": "red" });
18             },
19             function()
20             {
21             $(this).css({ "list‐style‐type": "none", "color": "" });
22             }
23         );
24     });
25     </script>
26 </head>
27 <body>
28 <ul>
29 <li style="cursor:pointer">click me</li>
30 </ul>
31 </body>
32 </html>

结果是每点击一次"click me"变换一次列表符号和文字颜色.

名称1	名称2	名称3
blur( )	keypress( )	select( )
blur( fn )	keypress( fn )	select( fn )
change( )	keyup( )	submit( )
change( fn )	keyup( fn )	submit( fn)
click( )	load( fn )	unload( fn )
click( fn )	mousedown( fn )	resize( fn )
dblclick( )	mouseenter( fn )	scroll( fn )
dblclick( fn )	mouseleave( fn )	keydown( )
error( )	mousemove( fn )	keydown( fn )
error( fn )	mouseout( fn )	mouseup( fn )
focus( )	focus( fn )	mouseover( fn )

1	<div class="outer" id="outer1">
2	Outer 1
3	<div class="inner" id="inner1">Inner 1</div>
4	</div>
5	<div class="outer" id="outer2">
6	Outer 2
7	<div class="inner" id="inner2">Inner 2</div>
8	</div>
9	<div id="console"></div>

1	<script type="text/javascript">
2	function report(event) {
3	$('#console').append('<div>'+event.type+'</div>');
4	}
5	$(function(){
6	$('#outer1').bind('mouseover',report).bind('mouseout',report);
7	$('#outer2').hover(report,report);
8	});
9	</script>

1	<!DOCTYPE HTML PUBLIC "‐//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2	<html>
3	<head>
4	<title>toggle example</title>
5	<link rel="stylesheet" type="text/css" href="css/hover.css">
6	<script type="text/javascript" src="scripts/jquery‐1.3.2‐vsdoc2.js"></script>
7	<script type="text/javascript">
8	$(function()
9	{
10	$("li").toggle(
11	function()
12	{
13	$(this).css({ "list‐style‐type": "disc", "color": "blue" });
14	},
15	function()
16	{
17	$(this).css({ "list‐style‐type": "square", "color": "red" });
18	},
19	function()
20	{
21	$(this).css({ "list‐style‐type": "none", "color": "" });
22	}
23	);
24	});
25	</script>
26	</head>
27	<body>
28	<ul>
29	<li style="cursor:pointer">click me</li>
30	</ul>
31	</body>
32	</html>