Jquery之事件委派详解

　　　最近接触Jquery比较多，今天就被一个Jquery的事件委派坑惨了，特此记录下，以方便日后的查阅。

一、定义

事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

二、版本

从jQuery1.7开始，jQuery引入了全新的事件绑定机制，on()和off()两个函数统一处理事件绑定。

因为在此之前有bind(), live(), delegate()等方法来处理事件绑定，jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法。

三、传统方法添加事件的缺点

<ul id="list"> ???<li>1111<li> ???<li>2222<li> ???<li>3333<li> ???<li>4444<li></ul>

 这是一个ul，里面包含4个li，如果想要给li加上点击事件，弹出一些内容，我们一般这样写：

$(‘#list li‘).click(function(){ ???alert(‘hello world!‘);})

这样当我们点击list里面的任何一个li都可以弹出‘hello world!’，但这样做有两个弊端：

1.很耗费资源，因为这种方式是给每个li都加上了事件，li的个数少的话还没事，如果li多的话会很耗费资源。

2.如果后期动态添加li，不会拥有这个弹出事件。(我就是被这个坑惨了，无法找到合适的解决方案，这也是事件委派出现的一个重要背景)

针对以上问题，可以用事件委派来解决。

四、使用

on(events,[selector],[data],fn)

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

我们还是以最普通的click事件为例进行说明：

以click事件为例：

普通绑定事件：$(‘.btn1‘).click(function(){}绑定

on绑定事件：$(document).on(‘click‘,‘.btn2‘,function(){}绑定

那么这两种方式有什么区别呢？

①click事件是在页面加载后，获取的所有类名为btn1的元素，然后绑定了这个click事件，你要是通过其他操作再生成一个btn1元素，它就没有click这个事件，当我们点击这个新建的btn1元素时，不会出发click事件。

②而on()事件起到了监听的效果,可以实现动态html元素绑定，比如一开始只有一个btn2元素，你通过某种方法又加了一个btn2元素，这个元素也可以点击，也可以出发click绑定的事件，当你无限添加，我都可以触发。

on()委托事件的优点：大大提高了效率和页面性能，解决的动态添加元素导致不能触发的bug。

这就是事件委派的优点，希望对大家有所帮助！