五、快捷事件 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"变换一次列表符号和文字颜色.