JQuery 事件處理 .click 與 .on() 的不同

寫網頁過程中，一定都會遇到要操作DOM做事件處理，那這種情況下最簡單的方式就是透過jquery來操控它，以最常發生的ckick事件說明，jquery提供了.click(function())以及.on('clcik',function())兩種方式來讓你操控你所只要指定的DOM，那這兩者間到底有什麼不一樣？

.click

它只對於你現在html上所指定的全部元素進行事件綁定，假設你現在html上有

  <ul>
    <li><span>click me</span></li>
    <li><span>click me</span></li>
    <li><span>click me</span></li>
  </ul>

然後你對這些span元素進行.click事件處理

        $('li span').click(function(){alert('hi')});

那在這邊所綁定的就是只有已經生成好的這三個span元素，如果你在後來透過jquery或其他方式所增加的span都不會出現在這個事件所綁定的範圍裡，所以.click是沒有辦法幫助你做到動態的事件綁定。

.on()

基本上.click能做到的事情，透過.on('click')的方式一樣都能做到，但是.on()能做到動態事件綁定，以上述的例子而言，我們可能會寫成

    $('li span').on('click',function(){alert('hi')});

這時你會發現，在動態事件這種方式會跟上述的.click事件處理方式一樣沒反應，那到底.on)要怎麼做到動態事件綁定？
.on()方法有提供第二個參數「childSelector」

        $('li').on('click','span',function(){alert('hi')});

childSelector的原理就是事件冒泡event bubbling ，在你點擊子元素span時，子元素span一樣是在父元素li裡面，所以你樣是有點擊到父元素li，而事件的傳遞會從子元素先發生接著向父元素傳遞，但是實際上我們這邊事件一樣是綁定在父元素li上，所以它會再去而找到相對應的子元素，來進行事件處理。

這兩者間最大的差異，大概就在動態事件處理上，當然還有像是一些小差異像是
.on()所佔用的記憶體會比.click還少
.on()為Namespaced Events，可以做到事件命名的管理。

參考資料：
http://stackoverflow.com/questions/8996015/jquery-on-vs-javascript-addeventlistener
http://ithelp.ithome.com.tw/question/10120565
https://www.quora.com/What-is-the-difference-between-click-and-on-click-in-jQuery

原文 http://skaih.logdown.com/posts/712464-jquery-click-on-the-where-different