原文鏈接：https://blog.csdn.net/aiolos1111/article/details/52047380
簡單以jQuery的 on() 方法為例說明：
API：
.on( events [, selector ] [, data ][, handler])
如果on()方法的selector 參數為空，事件處理程序就被稱為直接綁定。每當在被綁定元素上(如下例中被綁定的document元素，譯者注)發生事件時，無論這個事件發生在這個元素上還是從內層元素經冒泡而來，該處理程序都會被調用。
並且，如果on()方法的selector 參數為空，它與bind()方法相同——只能綁定頁面已有元素的事件。
事件綁定：
代碼：
<body>
<div>
這是一個div
<button>點擊</button>
</div>
<script type="text/javascript">
$(function(){
//將click事件綁定在document對象上，
//頁面上任何元素發生的click事件都冒泡到document對象上得到處理
//從而調用事件處理程序
//本例為了簡單綁定到了document，實際上綁定到那個元素上都有類似效果
$(document).on("click",function(e){
console.log(e.target.tagName + " is clicked")
})
})
</script>
</body>
表現：
事件委托：
如果on()方法的selector 參數不為空，事件處理程序就被稱為委托。當事件直接發生在被綁定的元素上(如下例中綁定到document上，譯者注)時，該程序不會被調用，而只有當事件發生在與選擇器匹配的內部元素上(如下例中click事件發生在button上，譯者注)時，才會調用該程序。
jQuery的事件委托是將事件從事件的發生者(即event target)一直向上冒泡到綁定了事件處理程序的元素上(例如從最內層元素向上冒泡到最外層元素)，並為冒泡“沿路”過程中匹配的所有選擇器執行事件處理程序。
<body>
<div>
這是一個div
<button>點擊</button>
</div>
<script type="text/javascript">
$(function(){
//將click事件綁定在document對象上，
//並傳入第二個可選參數：selector
//當事件冒泡到document對象時，檢測事件的target，
//如果與傳入的選擇符（這里是button）匹配，就調用事件處理程序即觸發事件，否則不觸發。
$(document).on("click","button",function(e){
console.log(e.target.tagName + " is clicked")
})
})
</script>
</body>
表現：
事件處理程序只會被綁定到當前已被選定的元素上(如上例中的document元素上，譯者注)，這些元素在調用on()方法時必須已經存在——同bind()。
為了確保這些元素已經存在並能被選中，請將代碼放置到</body>標簽之前或者在$(function(){ ... })內執行事件綁定。或者，使用事件委托來綁定事件處理程序
事件委托的優點：
1.能處理來自內層子元素的事件，且子元素可以是稍后時間生成在dom中的；
2.通過選擇一個在綁定事件委托處理程序時，已經存在的元素，進而綁定它下面的其他子元素的事件；使用事件委托來避免需要頻繁的添加和刪除事件處理程序的操作
3.除了可以處理尚未創建的內層子元素的事件，事件委托的另一個優點是：當需要監聽很多元素時，事件委托的性能更好