$(document).bind('click',function(){
$('.dialog').css('display','none');
});
$('.dialog').bind('click',function(e){
stopPropagation(e);
});
</script>
看起来简单依旧的样子，但是我们仔细想想就会发现问题，我们在每个dialog上都绑定了类似的方法，维护如此多的click事件处理程序对内存来说绝对是可开销，导致我们页面运行缓慢。而且如果我们可以动态使用ajax创建新dialog问题又来了，新创建的dialog不能实现隐藏功能！因为绑定函数已经执行完了，不会再为新的dialog绑定click事件处理程序，我们只能自己来做此事。也就是说思路一无法把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为它是直接把处理程序绑定到各个元素上，它不能把处理程序绑定到还未存在于页面中的元素之上。
这时候就是思路二展示身手的时候了，我们看看思路二在这种时候代码的书写
复制代码 代码如下:
<script type="text/javascript">
$(document).bind('click',function(e){
var e = e || window.event;
var elem = e.target || e.srcElement;
while (elem) {
if (elem.className && elem.className.indexOf('dialog')>-1) {
return;
}
elem = elem.parentNode;
}
$('#test').css('display','none');
});
</script>
改动也相当的小，我们来看看是不是能解决上边的两个问题了，首先无论多少个dialog我们只是绑定了一个click事件处理程序，对性能影响不大，添加一个新的dialog思路二的代码还好不好使呢，依旧好使，这样我们就能发现在复杂页面的情况下实际上思路二是一种更优秀的解决方案。
这些都明白了，我们就能说说本文的第二个主角jQuery的delegate方法了。
delegate
首先看看jQuery官方对delegate的语法及描述
.delegate( selector, eventType, handler(eventObject) )
Description: Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
复制代码 代码如下:
$( "table" ).delegate( "td", "click", function() {
$( this ).toggleClass( "chosen" );
});
通过上面语句我们就可以为所有table的td绑定click事件处理程序。
delegate方法设计意图在于把处理程序附加到单个元素上或是一小组元素之上，监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的多个个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上，从而带来性能上的优化。
jQuery版隐藏dialog
通过上面知识我们可以发现jQuery的delegate方法可以方便实现我们隐藏div的需求
复制代码 代码如下:
<script type="text/javascript">
$('.dialogs').delegate('.dialog','click',function(){
$(this).css('display','none');
});
</script>
使用jQuery我们发现比我们思路二在性能上又有了小幅提升，因为我们不需要冒泡至document处理了，只需要在dialog的父元素就可以处理完成了，可以不至于把很多类似功能都绑定到document上，需要注意的一点就是jQuery已经贴心的帮我们把this处理为事件源，处理起来更是如鱼得水了。