JQuery中的事件委托机制：delegate和undelegate

考虑下面这种场景：如果1个div下面有3个button，点击每个按钮的时候，需要打印出当前按钮的ID。

123

方式1：使用JQuery选择器，给每个按钮都绑定自己的事件处理函数。

方式2：利用事件委托机制，只给按钮的父元素绑定事件。

delegate这个API的函数签名如下：

selector:

代表JQuery中的选择器，用来过滤触发事件的元素。上面的parent元素下面有a、b、c这3个按钮，如果点击按钮b的时候，不打印出它的ID。那么可以通过如下代码实现：

type:
附加到元素的一个或多个事件，由空格分隔多个事件值。

data

传递给事件处理函数的参数值。

fn
当事件发生时候，调用的处理函数。

delegate()还有一个非常重要的性质：使用delegate() 方法的事件处理程序适用于当前已经存在或未来新增的元素。

下面的代码中，我们点击test按钮会新生成1个button，当点击这个新生成的button时，仍然会打印出它的id。

那么delegate()是怎么做到的呢？很简单，利用javascript中的事件冒泡机制。当子元素产生1个事件的时候，如果没有禁止这个事件的传播，那么父元素也会感知到这个事件(父元素上的事件处理函数被调用)。而且通过Event对象，能够拿到最初触发事件的元素。下面的代码，我们自己实现了1个简易的事件委托机制。

delegate和undelegate，很类似于bind和unbind，这里提一下：使用undelegate取消事件委托的时候，也可以使用事件命名空间机制。这篇文章中用bind和unbind作为例子，详细的介绍了事件命名空间机制，以及使用方式。