在第5章中,我们了解到将事件添加给元素的方便的jQuery函数。例如,如果每次默认单击一个一级标题的时候,你想要弹出一个警告框,那么,可以像下面这样使用.click()事件:
$('h1').click(function(){
alert('ouch!');
});//end click
jQuery提供了函数用于反馈不同的事件,例如,用于访问者提交一个表单的.submit(),或者当访问者的鼠标的光标离开一个元素的时候做某些事情的.mouseout()函数。所有这些函数都仅是5.5节介绍的使用jQuery.bind()函数的快捷方法。
.bind()函数接收几个参数:事件类型('click'、'mouseover'等)以及当发生该事件时候运行的一个函数。例如,我们可以重新编写上面的代码,如下所示:
$('h1').bind('click',function(){
alert('ouch!');
});//end bind
对于.bind()和.click()及.hover()的快捷事件函数,都有一个大问题:它们只适用于页面当前的HTML。对于本书中的示例,这没有问题,HTML载入,浏览器对该HTML应用事件监听器,并且一个用户与该页面交互。然而,随着你的程序变得越来越高级,我们将开始使用jQuery的操作函数(例如,本章前面介绍的.append()、.before()等),对Web页面的内容执行很多动态更新。遗憾的是,页面上已有的时间处理程序并不适用于你随后添加的HTML,这可能会导致产生问题。
例如,假设你创建了一个Web游戏:该游戏的目标是剔除花园中的所有杂草。玩家必须单击一个杂草,将其从屏幕上删除。但是,当然,杂草会继续填满屏幕。基本上,程序保持添加杂草,并且玩家需要单击杂草直到将它们都删除。在这个例子中,每个“杂草”都可以通过一个<div>标签表示,其中带有一副杂草的图片。程序持续地将div添加到页面,而玩家尝试通过单击div来删除它们。换句话说,每个div必须有一个click事件处理程序应用于它,以便它对于访问者的单击做出响应。你可以在程序中添加一些代码来做到这点,如下所示:
$('.weed').click(function(){
$(this).remove();
});//end click
这段代码的问题是,它只适用于已经存在的元素。如果通过编程添加新的div,例如,<div class="weed">,click事件处理程序并不适用于它们。
当我们使用本书第四部分所介绍的Ajax的时候,代码只适用于已有的元素,这也是个问题。Ajax允许我们使用从Web服务器获取的信息来更新页面的内容。例如,Gmail通过持续地从Web服务器获取内容,并且在Web服务器中更新内容,从而做到当你接收邮件的时候就可以显示它。在这个例子中,当你第一次开始使用Gmail的时候,接收的邮件的列表就发生变化。在页面载入的时候,适用于页面内容的任何事件,并不适用于从服务器添加的新的内容。
无论何时更新页面,我们都可以重新应用事件处理程序,但是,这种方法很慢而且效率较低。幸运的是,jQuer y提供了另一个函数来处理这种情况,这就是.delegate()。即便新的元素添加到页面的时候,.delegate()函数仍然保持活跃;也就是说,你只需要在程序中使用它一次,并且,它将能够对随后添加到页面的元素的事件做出响应。如下是.delegate()的基本语法:
$('#container').delegate('selector','event',function(){
//code to respond to event
});//end delegate
这语法看上去有点奇怪,因此,我们分解说明一下:
·首先,选择一个容器元素。这有点容易令人混淆,因为使用.bind(),我们选择想要对其添加事件的元素,而在这里,我们选择的元素则包含了想要对其添加事件的元素。例如,如果想要给一个ID为siderbar的div中的所有列表项添加一个click事件处理程序,首先像下面这样选择该div:
$('#sidebar')
如果想要对页面上的所有<a>标签应用一个mouseover事件处理程序,另一方面,我们选择body自身:
$('body')
·接下来,我们调用delegate()函数,并且向它传递3个参数:想要对其添加事件的选择器、事件的名称,以及响应该事件的函数。例如,使用代理来对ID为sidebar的一个div中的列表项应用一个click事件处理程序,我们可以编写如下代码:
$('#sidebar').delegate('li','click',function(){
//do something here
});//end delegate
同样,要在页面中对所有<a>标签应用一个mouseover事件处理器,你可以这样做:
$('body).delegate('a','mouseover',function(){
//do something here
});//end delegate
要查看.delegate()的实际应用,打开教程chapter13文件夹中的delegate.html文件。
注意:jQuery还提供了一个名为.live()的函数,该函数类似于.delegate(),因为它对于函数运行之后才添加的页面元素应用事件处理程序。然而,它比.delegate()慢很多,因此最好避免使用它。