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

首先本質區別是：

• 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事件裏面去寫代碼了，是否是很方便呢。

分類: Javascript學習筆記