jQuery Event Handlers 中事件绑定的四种方式

　　jQuery支持四种选择器绑定事件的方式，分别为：

1. bind()

2. live()

3. delegate()

4. on()　

　　

1.bind()

定义：bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。

使用语法：

　　绑定单个事件：$(selector).bind(event,data,function)

　　绑定多个事件：$(selector).bind(“event1 event2....",data,function)

• bind()方法只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置。也就是说它会绑定事件到所有的选出来的元素上，却不会绑定到在它执行完后动态添加的那些元素上；

• bind()方法支持将事件类型和处理函数直接绑定在DOM Element上，但是会有一些性能问题存在： 

  • bind()方法相比于live()，是直接将事件绑定到元素上的，幷没有利用事件冒泡；

  • 当绑定元素较多时才会出现效率问题；

  • bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()。

2.live()

定义：live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。

使用语法：$(selector).live(event,data,function)

• live()方法在jquery1.9版本已经删除；

• 用到了事件委托的概念来处理事件的绑定。live()方法会绑定相应的事件到你所选择的元素的根元素上，即是document元素上；

• 它的处理机制是这样的，一旦事件冒泡到document上，jQuery将会查找selector/event metadata,然后决定那个handler应该被调用；

• 这里仅有一次的事件绑定，绑定到document上而不像.bind()那样给所有的元素挨个绑定；

• 支持未来新添加元素的事件设置。因为它是把事件绑定到document上；

• 使用event.stopPropagation()是没用的，因为都要到达document；

• 当发生事件的元素在你的DOM树中很深的时候，会有performance问题；

3.delegate()

定义：delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

使用语法：$(selector).delegate(childSelector,event,data,function)

• 与live()方法不同，delegate()方法不会把所有事件都绑定到document上；

• jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素；

• 支持未来新添加元素的事件设置；

• 依然需要人工寻找父元素。

4.on()

定义：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。

使用语法：$(selector).on(event,childSelector,data,function,map)

• 前三种事件绑定方法都是通过on()来实现的；

• on()方法可以绑定动态添加到页面元素的事件；

• 与delegate()除了语法没什么区别