原文：https://www.cnblogs.com/sqh17/p/7746418.html
jQuery的區別：$().click()和$(document).on('click','要選擇的元素',function(){})的不同
jQuery的出現，大大簡化了對dom的操作，但是如果不是仔細閱讀api和進行操作，就不知道其中最大的優點和使用方式。就拿$().click()和$(document).on('click','要選擇的元素',function(){})來說，都是點擊事件的操作，但是也有不同的地方。
1. $(選擇器).click(fn)
當選中的選擇器被點擊時觸發回調函數fn。只針對與頁面已存在的選擇器。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('ul>li').click(function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>
結果如下： 后面動態創建的5和6，沒法進行點擊事件觸發。
2.$(document).on('click','要選擇的元素',function(){})
on方法包含很多事件，點擊，雙擊等等事件。和$().click()的用法一樣，最大的區別即優點是如果動態創建的元素在該選擇器選中范圍內是能觸發回調函數。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script src="jquery.min.js"></script>
<script>
$(function(){
$('body').on('click','ul>li',function(){
console.log($(this).html());
});
$('ul').append('<li>5</li><li>6</li>');
})
</script>
</body>
結果如下： 動態添加的元素也能被點擊觸發函數。
$().on()的知識點補充：
1.從jQuery 1.7開始，on()函數提供了綁定事件處理程序所需的所有功能，用於統一取代以前的bind()、 delegate()、 live()等事件函數。
$().bind()直接綁定在元素上，和click，blur，mouseon一樣的點擊事件。
$().live()是通過冒泡的方式來綁定到元素上的。更適合列表類型的，綁定到document DOM節點上。
$().delegate()是更精確的小范圍的使用事件代理。
$().on()結合了這三個方法的優勢摒棄了劣勢。
2.該函數可以為同一元素、同一事件類型綁定多個事件處理函數。觸發事件時，jQuery會按照綁定的先后順序依次執行綁定的事件處理函數。
3. 阻止事件冒泡和事件委托的方法：
A：return false。
在事件的處理中，可以阻止默認事件和冒泡事件。
B：event.preventDefault()
在事件的處理中，可以阻止默認事件但是允許冒泡事件的發生。
C：event.stopPropagation().。
在事件的處理中，可以阻止冒泡但是允許默認事件的發生。