隐藏div在单击页面中其他地方想到的jQuery的委托

首先从最简单的开始，如果页面有一个测试ID的div，我们想实现div：在单击页面中隐藏div：

复制代码代码如下所示：
一般来说有两种解决这个问题的方法，这两种想法都会用到事件这个原理，想了解更多关于Javaｓｃｒｉｐｔ事件的机制，可以看看javaｓｃｒｉｐｔ和html的交互事件，这不是本文的重点，所以这只是对全局事件的一个简单介绍，

事件冒泡

IE的事件气泡：事件从最具体的元素开始，然后向上传播到不太具体的元素。

Netscape的事件捕获：较不特定的节点更早接收事件，最具体的元素在最后接收事件，而事件与气泡相反。

DOM事件流：DOM2事件指定的事件流分为三个阶段，事件捕获阶段，在目标阶段，事件冒泡阶段，首先是事件捕获，提供事件的拦截机会，然后在实际的目标接收事件是最后一个泡沫字阶段。

Opera、Firefox、Chrome和Safari都支持DOM事件流，即不支持事件流，只支持事件气泡。

如果您有以下HTML，单击div区域，并根据不同的模型事件元素单击事件触发序列如下所示：

复制代码代码如下所示：

测试页
点击这里
当DOM事件触发，会有一个事件对象的事件，它包含所有相关的事件的信息，包括元素，产生事件，事件和其他相关信息。所有浏览支持事件对象，但支持是不同的。一个事件对象有一个方法（W3C：里面） /属性（即：cancelbulle = true），防止事件继续泡或捕获。如果我们要阻止泡沫事件时冒泡的某一元素，我们可以写一个兼容的浏览器的方法：

复制代码代码如下所示：
函数里面（e）{ / /对象的事件
如果（e.stoppropagation） / / W3C
e.stoppropagation（）；
其他 / / IE8及以下的浏览器
e.cancelbubble =真；
}
由于所有浏览器都支持事件气泡和浏览器兼容性考虑，所以在绑定事件时我们通常使用事件气泡而不是事件捕捉。

想了一个
第一个想法分为两个步骤。

第一步：将事件处理程序绑定到文档的单击事件以隐藏div

第二步：点击事件绑定事件处理程序在div防止事件冒泡和防止起泡的文件，和onclick方法调用文件隐藏DIV。

复制代码代码如下所示：

函数里面（e）{
如果（e.stoppropagation）
e.stoppropagation（）；
其他的
e.cancelbubble =真；
}

$（document）。Bind（听到咔哒声，函数（））{
$（# test）。Css（显示器，不关）；
}）；

$（# test）。Bind（听到咔哒声，功能（e）{ {）
里面（E）；
}）；
所以当点击非DIV区域，onclick方法直接或多层的泡沫会调用文件，隐藏的div，并点击div或其元素，事件总是泡DIV本身，这段时间将停止事件继续冒泡，而不是调用OnClick方法文献div隐藏，从而完成美国的需求。

思想的两

我们之前提到的，当触发对DOM事件将产生一个事件对象，该对象包含所有事件和相关信息，包括生成事件的元素，相关信息的事件类型，在Click事件处理程序DIV思想传递到事件对象的参数有访问伊江。事件对象的几种不同的方式，根据指定的事件处理程序方法。在事件处理程序是直接添加到DOM元素，事件对象存在的窗口对象的属性。

事件对象包含了一个重要的属性：目标（W3C） / srcelement（IE），这将触发事件的原始元素，和的想法是使用这个属性。我们可以直接处理点击事件绑定事件处理程序文件，看是否事件源ID = =测试的div元素或其子元素的事件处理程序。如果是这样的话，还不做手术，如果不是，它将隐藏的div

复制代码代码如下所示：

$（document）。Bind（听到咔哒声，功能（e）{ {）
VaR E = e window.event / / | |；浏览器兼容性
var elem = e.target e.srcelement | |；
而（元）{ / /环防止与节点，在div元素点击
如果（elem.id元。ID = =测试）{
返回；
}
elem.parentnode elem =；
}

$（# test）。Css（显示器，不关'）； / /点击div或它的子元素
}）；
这样，当在任何地方单击页面时，它都会冒泡以记录所有级别的单击事件。事件处理程序将确定事件源是否是id =测试的div或其子元素。如果是方法返回，否则，隐藏div也可以满足我们的需要。

注意点及其利弊

这两种想法都依赖于事件泡沫。因此，在处理这些事件时，我们必须注意处理其他相关元素的点击事件，这样我们就可以避免点击事件处理程序中的其他相关元素，包括阻塞事件、气泡代码，并影响这个功能。

这两种方法容易理解。思维方式更好。看来它的处理比较简单。它不需要各级法官的事件源，并直接绑定点击事件，在这种情况下的性能，这是真的，但一些复杂的网页是不够的。如果我们有一个页面，每个页面有十个div。我们需要点击页面并将其隐藏在其他地方。

复制代码代码如下所示：
一
二
一
二
一
二

…
我们用想法写的代码可能是这样的。

复制代码代码如下所示：

函数里面（e）{
如果（e.stoppropagation）
e.stoppropagation（）；
其他的
e.cancelbubble =真；
}

$（document）。Bind（听到咔哒声，函数（））{
$（'对话框）。Css（显示器，不关）；
}）；

$（'对话框）。Bind（听到咔哒声，功能（e）{ {）
里面（E）；
}）；

看起来很简单。但是当我们想到它的时候，就会发现问题所在。每个对话框都有类似的方法。维护这么多的点击事件处理程序对内存来说是绝对昂贵的，导致我们的页面运行缓慢。如果我们可以动态地使用Ajax来创建一个新的对话框问题，那么新创建的对话框就不能隐藏了！因为绑定功能完成，没有更多的单击事件处理程序会为新的对话，我们只能做我们自己的，这种想法是不附加到DOM元素的处理程序可能不在DOM的存在。因为它把处理程序直接对每一个元素，它不绑定的处理器尚未在页面中存在的元素。

这是思考二的时候，让我们看看此时的思考二。

复制代码代码如下所示：

$（document）。Bind（听到咔哒声，功能（e）{ {）
VaR E = e window.event | |；
var elem = e.target e.srcelement | |；
而（元）{
如果（elem.classname elem.classname.indexof（'dialog）> 1）{
返回；
}
elem.parentnode elem =；
}

$（# test）。Css（显示器，不关）；
}）；
这些变化都很小，我们先看两个问题是不能解决的，不管有多少对话框我们只需绑定一个点击事件处理程序，性能不会受到影响，添加一个新的对话框两个思想代码那么好，根据旧的工作，这样我们就可以发现在复杂的页面情况下实际上两个想法是更好的解决方案。

所有这些都是理解的，我们可以讨论这篇文章的第二个主角的委托方法jQuery。

代表
首先看看jQuery的官方语法和委托的描述。

。代表（选择器、事件类型、处理程序（间的事件））

描述：将处理程序附加到所有事件的一个或多个事件中，因为，第二部分是正确的方式。

委托（）方法将一个或多个事件处理程序添加到指定的元素，该元素是所选元素的子元素，并指定当这些事件发生时运行的函数。

使用委托（）方法的事件处理程序适用于当前或将来的元素（例如，脚本创建的新元素）。

复制代码代码如下所示：
$（表）。委托（）
$（这）。ToggleClass（选择）；
}）；
通过上面的语句，我们可以为表的所有TD绑定单击事件处理程序。

委托方法的设计意图是将加工程序单元素或一组元素，听而不是循环遍历子元素的事件和高度相同的功能在多元素的DOM。添加处理程序一个（或一组）而不是直接添加处理程序页面中所有的元素祖先元素，导致性能优化。

隐藏对话框的jQuery版本

通过以上知识，我们可以发现jQuery的委托方法可以方便我们隐藏div的需求。

复制代码代码如下所示：

$（'对话框），委托（'对话框，点击'功能（））{
$（这）。Css（显示器，不关）；
}）；
使用jQuery，我们发现了两个性能比我们想象的有小幅提升，因为我们不需要处理文档的泡沫，只有在对话框的父元素可以处理完成的，不能把很多类似的功能绑定到文件，需要注意的一点是jQuery贴心帮助我们把这个作为事件源，它像一个鸭子。

代表和绑定
通过上面我们说，我们中的一部分可以在一定的基础上权衡绑定或委托的使用，如果单独绑定事件处理程序的元素，绑定是非常合适的，但是当考虑委托时，如果事件处理程序的许多相似元素，请参阅帮助以改进性能。