直接事件和委托事件

有很多人问过我这个问题，如下：

$('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节点进行事件绑定时，应该用第二种。