事件与事件对象（三）

来源：互联网发布：同曦万尚城mac 编辑：程序博客网时间：2024/05/16 05:22

五、快捷事件 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 13 <div class="inner" id="inner1">Inner 1</div>4 </div>5 <div class="outer" id="outer2">6 Outer 27 <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"变换一次列表符号和文字颜色.