直接事件和委託事件

有不少人問過我這個問題，以下：

$('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節點進行事件綁定時，應該用第二種。