前两个是等效的。
$("blah").click( function() { alert( "Click!" ); } );
$("blah").bind( "click", function() { alert( "Click!" ); } );
但是,第二个事件可用于通过指定多个空格分隔的事件名称同时绑定到多个事件:
$("blah").bind( "click mouseover mouseout", function() { alert( "Click! Or maybe mouse moved." ); } );
该方法更有趣。请考虑以下示例:.live
<a class="myLink">A link!</a>
<a id="another">Another link!</a>
<script>
$("a.myLink").click( function() { alert( 'Click!' ); } );
$("a#another").addClass( "myLink" );
</script>
脚本的第二行执行后,第二个链接还将具有CSS类“myLink”。但它将没有事件处理程序,因为在附加事件时它没有该类。
现在考虑一下您希望它反过来:每次页面上的某个位置出现带有类“myLink”的链接时,您都希望它自动具有相同的事件处理程序。当您具有某种列表或表时,这种情况很常见,您可以在其中动态添加行或单元格,但希望它们都以相同的方式运行。与其每次都重新分配事件处理程序,不如使用以下方法:.live
<a class="myLink">A link!</a>
<a id="another">Another link!</a>
<script>
$("a.myLink").live( "click", function() { alert( 'Click!' ); } );
$("a#another").addClass( "myLink" );
</script>
在此示例中,第二个链接还将在获得“myLink”类后立即获取事件处理程序。:-)
当然,它不是那么字面上的意思。真正的作用不是将处理程序附加到指定的元素本身,而是附加到HTML树的根(“body”元素)。DHTML中的事件具有“冒泡”的有趣功能。请考虑以下情况:.live
<div> <a> <b>text</b> </a> </div>
如果单击“text”,则首先<b>元素将获得“click”事件。之后,<a>元素将获得“单击”事件。之后,<div>元素将获得“单击”事件。以此类推 - 一直到<体>元素。这就是jQuery将捕获事件并查看是否有任何“实时”处理程序适用于首先导致事件的元素。整洁!
最后是方法。它只是获取元素中符合给定选择器的所有子元素,并向它们附加一个“实时”处理程序。看一看:.delegate
$("table").delegate( "td", "click", function() { alert( "Click!" ); } );
$("table").each( function() {
$(this).find( "td" ).live( "click", function() { alert( "Click!" ); } );
} );
问题?