通过点击页面上隐藏的div来委托jQuery

从最简单的开始，如果页面有一个id为test的div，我们需要点击页面的其他部分来隐藏div:复制的代码如下： div ID=' test ' style=' margin :100 px；背景色： # 3e 3；宽度width:100px' height:100px'/div这个问题一般有两种思路，都是利用事件冒泡的原理。如果想详细了解JavaScript事件机制，可以看看Javascript和HTML交互的——事件，这不是本文的重点，所以这里只是简单介绍一下事件冒泡，事件冒泡IE的事件冒泡：当一个事件开始时，它被最具体的元素接收。然后一步一步扩散到网景的事件捕获这个不太具体的元素：不太具体的节点更早收到事件，而最具体的元素最后收到事件。与事件冒泡相反，DOM事件流：DOM2级事件规定事件流包括三个阶段，即事件捕获阶段，即目标阶段和事件冒泡阶段。第一个事件捕获发生，提供了拦截事件的机会，然后实际目标接收事件，最后是冒泡句子阶段。Opera、Firefox、Chrome、Safari都支持DOM事件流，IE不支持事件流，只支持事件冒泡。如果有以下html，点击div区域，根据不同模型事件元素的点击事件触发顺序，如下图：复制代码如下：DOCTYPE html html head meta http-equiv=' Content-type ' Content=' text/html；charset=utf-8 '/title测试页/标题/流头部分单击此处/部分/正文/html

当DOM上的事件被触发时，将生成一个事件对象event，它包含与事件相关的所有信息，包括生成事件的元素、事件类型和其他相关信息。所有浏览都支持事件对象，但支持方式不同。事件对象有一个方法(W3C:stopper propagation)/属性(即：cancelbulle=true)，可以防止事件继续冒泡或捕获。如果我们想防止一个事件冒泡到一个元素，我们可以编写这样一个兼容的浏览器方法：复制的代码如下：函数停止传播(e){//将事件对象传入if(e . stopperpagation)//支持W3C标准e . stopperpagation()；Else //IE8及以下浏览器e.cancelBubble=true}由于所有浏览器都支持事件冒泡，考虑到浏览器兼容性，我们在绑定事件时通常使用事件冒泡代替事件捕获。了解了这一点之后，我们可以看看下面两个思路。想法1第一个想法分为两步。第一步：将事件处理程序绑定到文档的click事件，隐藏div。第二步：将事件处理程序绑定到div的click事件，防止事件冒泡到文档，同时调用文档的onclick方法隐藏div。复制代码如下： script type=' text/JavaScript '函数stop propagation(e){ if(e . stop propagation)e . stop propagation()；else e.cancelBubble=true} $(文档)。bind('click '，function(){ $('#test ')。css('display '，' none ')；});$('#test ')。bind('click ')，函数(e){ stopperpagation(e)；});/script这样，当点击页面的非div区域时，直接冒泡或者逐层冒泡都会调用document的onclick方法隐藏div，而当点击div或者其子元素时，事件总是会冒泡div本身，这样会防止事件冒泡，不会调用doument的onclick方法隐藏div，从而满足我们的要求。第二，我们之前提到过，当DOM上的一个事件被触发时，会生成一个事件对象事件，它包含了与该事件相关的所有信息，包括事件生成元素、事件类型等相关信息。div的click事件处理程序传入的参数首先想到的就是这个事件对象。在IE中有几种不同的方式来访问事件对象，这取决于指定事件处理程序的方法。当您将事件处理程序直接添加到DOM元素时，事件对象作为窗口对象的属性存在。事件对象包含一个重要属性：target(W3C)/srcElement(IE)，它标识触发事件的原始元素。第二个想法是使用这个属性。我们可以将事件处理程序直接绑定到document的click事件，判断事件源是id==test的div元素还是事件处理程序中的其子元素。如果是，方法返回不操作，如果不是，隐藏div。复制代码如下：脚本类型=' text/JavaScript' $(文档)。bind ('click '，function(e){ var e=e | | window . event；//浏览器兼容性var elem=e . target | | e . srcelement；While (elem) {//循环判断到下面的节点，防止点击div子元素if(elem . idem . id==' test '){ return；} elem=elem.parentNode} $('#test ')。css('display '，' none ')；div或其子元素未被单击})；/script这样，当点击页面上的任意位置时，就会逐层冒泡到文档的点击事件。事件处理程序将判断事件源是id==test的div还是其子元素。如果是方法返回，否则会隐藏div，这也能满足我们的需求。注意点和优缺点都依赖于事件冒泡，所以我们在处理其他相关元素的点击事件时一定要注意这一点，避免其他相关元素的点击事件处理程序中包含防止事件冒泡的代码，影响这个功能。这两种方法都很容易理解。似乎第一个想法更好，似乎它的处理更简单。点击事件不是逐层判断事件源，而是直接绑定到div。

在这个例子中是这样的，但是一些复杂的页面不是。如果我们有一个页面，上面有几十个div需要点击页面上的其他地方来隐藏这样的问题。复制的代码如下： Div class=' dialog ' Div class=' dialog ' Div id=' 1 ' 1/Div Div id=' 2 ' 2/Div/Div class=' dialog ' Div id=' 1 ' 1/Div id=' 2 ' 2/Div/Div class=' dialog ' Div id=' 1 ' 1/Div id=' 2 ' 2/Div/Div./div我们用Idea 1编写的代码可能是这样的：复制的代码如下： script type=' text/JavaScript ' function stopperpagation(e){ if(e . stopperpagation)e . stopperpagation()；else e.cancelBubble=true} $(文档)。bind('click '，function(){ $(')。对话框’)。css('display '，' none ')；});$('.对话框’)。bind('click ')，函数(e){ stopperpagation(e)；});/script看起来和以前一样简单，但是如果我们仔细想想，就会发现问题。我们将类似的方法绑定到每个对话框。维护这么多点击事件处理程序绝对是内存开销，这导致我们的页面运行缓慢。而如果我们可以动态使用ajax创建一个新的对话框，问题又来了，新创建的对话框无法实现隐藏功能！因为绑定函数已经执行，我们不会为新对话框绑定click事件处理程序，所以只能自己绑定。也就是说，想法1不能将处理程序附加到DOM中可能还不存在的DOM元素。因为它将处理程序直接绑定到每个元素，所以它不能将处理程序绑定到页面中尚不存在的元素。这是想法2展示其技能的时候了。让我们来看看想法2。此时，代码的编写和复制如下： Script Type=' text/JavaScript ' $(文档)。bind ('click '，function(e){ var e=e | | window . event；var elem=e . target | | e . srcelement；while(elem){ if(elem . class name elem . class name . indexof(' dialog ')-1){ return；} elem=elem.parentNode} $('#test ')。css('display '，' none ')；});/脚本改动也挺小的，看看能不能解决上面两个问题。首先，不管有多少对话框，我们只是绑定一个click事件处理程序，对性能影响不大。添加新对话框Idea 2的代码仍然运行良好，因此我们可以发现Idea 2实际上是复杂页面情况下更好的解决方案。了解了这一切之后，我们可以来谈谈本文的第二个主角jQuery的委托方法。委托首先查看jQuery的官方语法和委托描述。delegate(selector，eventType，handler(eventObject))描述：为所有与选择器匹配的元素的一个或多个事件附加一个处理程序，无论是现在还是将来，该方法基于一组特定的rootelements.delegate()将一个或多个事件处理程序添加到指定的元素(属于所选元素的子元素)中，并指定这些事件发生时要运行的函数。使用delegate()方法的事件处理程序适用于当前或未来的元素(如脚本创建的新元素)。复制代码如下： $ ('table ')。委托(' TD '，' click '，function () {$ (this)。切换类别('已选择')；});通过上面的语句，我们可以为所有表的td绑定click事件处理程序。委托方法的设计意图是将处理程序附加到单个元素或一小组元素上，监听后代元素上的事件而不是循环遍历它们，并将相同的函数逐个附加到DOM中的多个元素上。将处理程序附加到一个(或一小组)祖先元素，而不是直接将处理程序附加到页面中的所有元素，会带来性能优化。

通过以上知识，我们可以发现jQuery的委托方法很容易满足我们隐藏div的需求。复制代码如下：脚本类型=' text/JavaScript' $('。对话框’)。委托('。对话框'，'点击'，函数(){$ (this)。CSS ('display '，' none。});/script使用jQuery的时候，我们发现性能相比我们的第二个想法有了略微的提升，因为我们不需要冒泡到文档处理，而我们只需要dialog的父元素来完成处理，这样就可以避免将很多类似的函数绑定到document。有一点需要注意的是，jQuery帮助我们将此作为一个事件源来亲密对待，它更像是如鱼得水。委托和绑定通过以上，我们可以有一些依据来权衡是使用绑定还是委托。如果单独绑定一个元素的事件处理程序，使用bind仍然是合适的。但是，如果您处理许多类似元素的事件处理程序，您可能希望考虑委托，看看它是否有助于提高性能。