來自：https://www.cnblogs.com/yewenxiang/p/6171411.html

首先本質區別是：

• event.target返回觸發事件的元素

• event.currentTarget返回綁定事件的元素

????舉個例子：

 1     <ul id="ul">ul
 2         <li>li<a href="">a</a></li>
 3         <li>li<a href="">a</a></li>
 4         <li>li<a href="">a</a></li>
 5     </ul>
 6     <script>
 7         var ul = document.getElementById("ul");
 8         ul.onclick = function(event){
 9             var tar = event.target;
10             var tagName = tar.nodeName.toLowerCase();
11             console.log("你點擊了:"+tagName);
12             event.preventDefault();
13         }
14     </script>

　　當我點擊哪個元素時，event.target返回的是點擊的元素節點，我們可以用返回的節點使用一些DOM對象上的一些操作。這裏event.preventDefault，是用來阻止點擊a默認跳轉，刷新頁面導致結果不能輸出來的一個作用。

event.currentTarget的作用是什麽呢，我覺得他和this 的作用是差不多的，始終返回的是綁定事件的元素

 1 <ul id="ul">ul
 2         <li>li<a href="">a</a></li>
 3         <li>li<a href="">a</a></li>
 4         <li>li<a href="">a</a></li>
 5     </ul>
 6     <script>
 7         var ul = document.getElementById("ul");
 8         ul.onclick = function(event){
 9             var tar = event.target;
10             var current = event.currentTarget;
11             var tagName = tar.nodeName.toLowerCase();
12             console.log(tar == this);
13             event.preventDefault();
14         }
15     </script>

實際使用中target的妙用：

　　target事件委托的定義：本來該自己幹的事，但是自己不幹，交給別人來幹。比如上面的例子中，應該是ul li a 來監控自身的點擊事件，但是li a自己不監控這個點擊事件了，全部交給li父節點和a祖父節點ul來監控自己的點擊事件。一般用到for循環遍歷節點添加事件的時候都可以用事件委托來做，可以提高性能。

來個案例：一個添加刪除的demo。

 1 　　<input type="text" id="text">
 2     <input type="button" value="添加" id="button">
 3     <ul>
 4         <li>第1個<button class="btn" id="1">刪除</button></li>
 5         <li>第2個<button class="btn" id="2">刪除</button></li>
 6         <li>第3個<button class="btn" id="3">刪除</button></li>
 7     </ul>
 8     <script>
 9             var button = document.getElementById("button");
10             var text = document.getElementById("text");
11             var ul = document.getElementsByTagName("ul")[0];
12             var btnClass = document.getElementsByClassName("btn");        
13         button.onclick = function(){
14             var deleteButton = document.createElement("button");    
15             var value = text.value;
16                 deleteButton.setAttribute("class","btn");
17             var deleteText = document.createTextNode("刪除");
18                 deleteButton.appendChild(deleteText);
19             var li = document.createElement("li");
20             var liText = document.createTextNode(value);
21                 li.appendChild(liText);
22                 li.appendChild(deleteButton);
23                 ul.appendChild(li);
24             for(var i=0;i<btnClass.length;i++){
25                 btnClass[i].onclick=function(){
26                 this.parentNode.parentNode.removeChild(this.parentNode);
27             }
28         }
29         }
30 
31             for(var i=0;i<btnClass.length;i++){
32                 btnClass[i].onclick=function(){
3334                     this.parentNode.parentNode.removeChild(this.parentNode);
35                 }
36             }
37     </script>

為什麽在第24行也需要一個for循環，給每個刪除按鈕添加事件呢，因為外面的for循環，在文檔刷新時給頁面中存在的三個刪除按鈕添加了點擊事件，而後來添加的刪除按鈕並沒有綁定事件，導致頁面中存在的三個li標簽可以刪除，而後來新添加的li不能刪除這個問題。我們使用事件委托來做就不用這麽麻煩了

 1 <script>
 2             var button = document.getElementById("button");
 3             var text = document.getElementById("text");
 4             var ul = document.getElementsByTagName("ul")[0];
 5             var btnClass = document.getElementsByClassName("btn");        
 6         button.onclick = function(){
 7             var deleteButton = document.createElement("button");    
 8             var value = text.value;
 9                 deleteButton.setAttribute("class","btn");
10             var deleteText = document.createTextNode("刪除");
11                 deleteButton.appendChild(deleteText);
12             var li = document.createElement("li");
13             var liText = document.createTextNode(value);
14                 li.appendChild(liText);
15                 li.appendChild(deleteButton);
16                 ul.appendChild(li);
17             }
18             ul.onclick = function(event){
19                 var tar = event.target;
20                 if(tar.nodeName.toLowerCase() == "button"){
21                     tar.parentNode.parentNode.removeChild(tar.parentNode);
22                 }
23             }
24     </script>

給ul添加了點擊事件，點擊ul裏面的子元素，event.target都會返回當前點擊的元素節點，做一個判斷，如果點擊了button標簽，刪除這個li節點。由於添加的li都在ul節點裏面，所以並不用再去添加li事件裏面去寫代碼了，是不是很方便呢。

event對象中 target和currentTarget 屬性的區別