jq 事件委托 将事件预绑定给未加载的元素

问题来源：

追加的 html 元素无法使用先前加载的 js 方法。

使用 jq 事件委托能够解决。

#分析#

html 元素只能调用与它一起加载的 js 函数，无法调用比他先加载的 js 函数；

但 jq 函数却能监听控制之后加载的 html 元素（注意：要用父类容器来定位）；

两者的主动权不一样！

===========================================

以下情况使用事件委托

第一：大量的事件绑定，性能消耗，而且还需要解绑（IE会泄漏） 

第二：绑定的元素必须要存在 

第三: 后期生成HTML会没有事件绑定，需要重新绑定 

第四: 语法过于繁杂

事件委托利用事件冒泡原理，自己不处理事件，而是委托给父节点或者祖先元素甚至是根元素来处理。

jquery为此衍生出四种事件绑定函数

bind方法 

live方法 

delegate方法 

on方法

==========================================

传统方法添加事件的缺点

示例：

<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，不会拥有这个弹出事件。

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

示例：

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

$('#list li').live('click', '#list li', function() {
    alert('hello world!');
}); 

on()写法（注意：用父类容器来定位）

$(document).on('click', '#list li', function() {
    alert('hello world!')
});

这里的关键就是第二个参数'selector'在起作用了。它是一个过滤器的作用，只有被选中元素的后代元素才会触发事件。