**看一看，瞧一瞧！** 話說要談事件委托和target。那我們首先來看看什麼是事件。話說什麼是事件呢？一般的解釋是比較重大、對一定的人群會產生一定影響的事情。而在JavaScript中就不是這樣了，事件就是指事情發生了，然後得到有效的處理的操作。為了您能更好的明白，我們來看看以下例子，讓你更清楚什 ...
**看一看，瞧一瞧！**
話說要談事件委托和target。那我們首先來看看什麼是事件。話說什麼是事件呢？一般的解釋是比較重大、對一定的人群會產生一定影響的事情。而在JavaScript中就不是這樣了，事件就是指事情發生了，然後得到有效的處理的操作。為了您能更好的明白，我們來看看以下例子，讓你更清楚什麼是事件哦！
1、電話鈴聲響起（事件發生） —需要接電話（事件處理）
2、學生舉手請教問題（事件發生） —需要解答（事件處理）
3、9點半提醒大家開始上課（事件發生）—打開直播開始上課（事件處理）
4、按鈕被點擊了（事件發生）， —網頁會反饋（事件處理）…## 明白了嘛！
當然了，我們熟知的還有滑鼠事件、鍵盤事件、視窗事件表單事件。
事件是怎樣產生的呢？
oBtn.onclick = function(ev){
var e = ev || window.event;//系統自己產生一個事件對象
alert(e);
} 如何綁定事件
元素節點.on + 事件類型 = 事件處理函數;
事件對象：一旦事件出發，就會產生一個事件對象
（系統根據事件綁定自動生成的）。
【註】當點擊按鈕以後，系統會調用這個函數，系統會自動將事件對象，傳入到函數的第一個參數。
好了看了這麼久都是在為我們接下來的主題作鋪墊，順帶幫大家回顧回顧哦！
接下來讓我們看看什麼是事件委托？
首先生活中的委托，大家很熟悉吧！
看了是不是有點豁然開朗呀！其實從身邊的很多事都能表明我們時時刻刻都在接觸事件委托。只是我們不習慣不擅長用代碼去表示而已。
接下來讓我們一起去看看代碼中的委托長啥樣吧！
簡單的舉個例吧！當我們在也頁面創建‘ul’、‘li’無序列表時。我們通過獲取ul並給它綁定點擊事件，同時我們事件委托，委托ul的點擊事件，將當前點擊的li節點變成紅色，找到觸發對象，判斷符合要求，如若符合，完成委托，把當前點擊的li變為紅色。
該怎樣判斷呢？
通過event中的target來判斷是否是我們所要找的節點
//e.target就是點擊的元素
var target = e.target || window.event.srcElemen
//判斷target是否符合要求的元素節點
if(target.tagName.toLowerCase() == "li"){}；事件委托其實就是利用事件冒泡，將事件加在父元素或者祖先元素上，觸發該事件。
從上面舉例看來可以簡單的來總結事件委托實現的步驟就是：
1、找要添加行為的節點的父節點或者祖先節點
2、將事件綁定在找到的父節點上
3、找到觸發對象，判斷是否符合要求，如果符合要求，進行後續操作。
window.onload = function(){
var UL = document.getElementById('ul1');
//委托ul上的點擊事件，將當前點擊的li節點變為紅色
UL.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
//判斷target是否符合要求的元素節點
if(target.tagName.toLowerCase() == 'li'){
//將當前點擊這個li節點變成紅色
target.style.backgroundColor = 'red';
}
}
}眾所周知事件委托，最重要的功能是提高程式運行效率。如果我們想在後面繼續添加li標簽，讓他也擁有點擊li節點會變成紅色的效果，應該怎樣做呢？不知道吧！讓我來教你！
window.onload = function(){
var UL = document.getElementById('ul1');
//委托ul上的點擊事件，將當前點擊的li節點變為紅色
UL.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
//判斷target是否符合要求的元素節點
if(target.tagName.toLowerCase() == 'li'){
//將當前點擊這個li節點變成紅色
target.style.backgroundColor = 'red';
}
}
var i = 6;
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
var newLi = document.createElement("li");
newLi.innerHTML = 111 * i++;
oUl.appendChild(newLi);
}事件委托所能帶來的好處有：
1、節省資源同時減少了dom操作，提⾼性能
2、對於新添加的元素也會有之前的事件
為了提升大家對事件委托的理解和能有效的運用事件委托解決問題，特別向大家列出幾個有關事件委托的案例。
驚不驚喜！意不意外！
一、表格案例
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){//獲取節點
var aInputs = document.getElementsByTagName("input");
var oBtn = document.getElementById("btn1");
var oT1 = document.getElementById("t1");
//給按鈕，添加點擊
oBtn.onclick = function(){//獲取輸入框的行業列
var oCol = parseInt(aInputs[1].value);
var oRow = parseInt(aInputs[0].value);
//如果行和列中其中有一個不存在
if(!(oCol && oRow)){
alert("請輸入行和列");
}else{ //根據行和列進行創建
//創建行
for(var i = 0; i < oRow; i++){
var oTr = document.createElement("tr");
//創建列
for(var j = 0; j < oCol; j++){
var oTd = document.createElement("td");
oTd.innerHTML = "行:" + i + ", 列:" + j;
oTr.appendChild(oTd);
}
//最後面添加一個刪除按鈕
oTd = document.createElement("td");
var newBtn = document.createElement("button");
newBtn.innerHTML = "刪除";
oTd.appendChild(newBtn);
oTr.appendChild(oTd);
oT1.appendChild(oTr);
}
}
}
//事件委托
oT1.onclick = function(ev){
var e = ev || window.event;
var target = e.target || window.event.srcElement;
//判斷觸發對象
if(target.tagName.toLowerCase() == "button" && target.innerHTML =="刪除"){
oT1.removeChild( target.parentNode.parentNode);
}
}
}
</script>
</head>
<body>
<input type=