JavaScript事件代理
當我們需要對很多元素添加事件的時候，可以通過將事件添加到它們的父節點而將事件委托給父節點來觸發處理函數。這主要得益于瀏覽器的事件冒泡機制
下面我們用一個簡單的例子來介紹js的事件代理機制
有如下代碼，當需要為ul下面擁有很多li
<ul class="list">
<li>hello world</li>
<li>name</li>
<li>age</li>
需要做出效果，點擊li標簽時，在控制臺輸出這個li標簽的內容，通常需要做以下處理
function $(selector){
return document.querySelector(selector)
}
for(var i=0; i<$(".list").children.length; i++){
$(".list").children[i].onclick = function(){
console.log(this.innerText)
}
}
依次點擊li標簽，控制臺依次出現點擊事件，如下圖：
上圖鏈接
使用事件代理機制，當事件冒泡到父元素時，通過檢查事件對象(target)判斷獲取事件源li，代碼如下：
function $(selector){
return document.querySelector(selector)
}
$(".list").onclick = function(e){
if(e.target){
console.log(e.target.innerText)
}
}
依次點擊li標簽，控制臺依次出現點擊事件，如下圖：
注意： 如果這個元素中的li頻繁增減，函數因開始就已經選中ul下的li，并不知道后面增減的li。此時代碼就可能出錯
此時使用事件代理機制，能更好簡單的解決這個問題，為剛才兩個案列增加一個add按鈕，實現效果，每點擊一次會在ul下新增一個li。
如上圖，使用方法1，除原本的3個li外，點擊新增的li無效果
方法2
使用方法2，點擊新增的li，依然能實現效果。
