直接事件和委托事件

有不少人问过我这个问题，以下：

$('ul li').on('click', function () {
    //TODO
});

$('ul').on('click', 'li', function () {
    //TODO
});

这两段代码有何区别？

jquery的官网文档中有详细的解释：

第1段的意思是把事件直接绑定在li上面，若是有N个li，那么就至关于绑定了N次li。并且只能绑定到文档中已经存在的li上面，后续添加的li是绑定不上的，好比经过ajax添加进去的新的li。 这就是直接事件绑定。

第2段是委托事件，也叫代理事件，只绑定了一次事件到li上面，也能够监听到后续添加的li。

二者的使用场景是有细微区别的，若是你只须要对已有的dom节点绑定事件，能够用第一种写法，也能够用第二种，

而当你须要全量监听时，特别是针对ajax动态引入的dom节点进行事件绑定时，应该用第二种。