currentTarget與target區別

admin發表於2018-11-01

標題中兩個屬性都屬於事件物件。

有時它們兩個返回值完全一樣，所以具有一定的迷惑性。

下面將通過程式碼例項詳細分析一下它們之間的區別與應用。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
#ant{
  width:100px;
  height:60px;
  background-color:#ccc;
}
</style> 
<script> 
window.onload=function(){ 
  let obox = document.getElementById("ant");
  obox.onclick = function (ev) {
    console.log(event.target.id);
    console.log(event.currentTarget.id);
  } 
} 
</script> 
</head> 
<body> 
<div id="ant"></div> 
</body> 
</html>

點選div元素，然後在控制檯檢視執行效果。

程式碼內容截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013704m2mbt5zmlmb92knq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

點選div元素之後，可以將兩個屬性返回元素的id屬性值在控制檯列印出來。

可以看到這兩個元素返回值是完全一樣的，如果總是一樣，那麼官方建立兩個屬性將毫無意義了。

再來看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title> 
<style type="text/css"> 
#ant{
  width:100px;
  height:60px;
  background-color:#ccc;
}
#inner{
  width:50px;
  height:30px;
  background-color:blue;
}
</style> 
<script> 
window.onload=function(){ 
  let obox = document.getElementById("ant");
  let oinner=document.getElementById("inner");
  obox.onclick = function (ev) {
    console.clear();
    console.log(event.target.id);
    console.log(event.currentTarget.id);
  } 
} 
</script> 
</head> 
<body> 
<div id="ant">
  <div id="inner"></div>
</div> 
</body> 
</html>

上述程式碼點選不同的元素，在控制檯列印出不同內容。

兩個屬性的區別也得以體現：

（1）.點選外層div元素，控制檯列印截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013741im8pluala168u84y.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

（2）.點選內部div元素，控制檯列印截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/01/013807m3tt3zfqggampt3f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

首先給出兩個屬性的概念：

（1）.currentTarget屬性返回註冊事件處理函式的元素。

（2）.target屬性返回觸發事件處理函式的元素。

程式碼分析總結如下：

（1）.註冊事件處理函式的元素與觸發事件的元素可能是同一個元素，就如點選外層元素。

（2）.註冊事件處理函式的元素也可能與觸發事件的元素非同一元素，很多事件具有冒泡效果，比如上述程式碼，點選子元素會觸發click事件，根據冒泡原理，事件向上傳遞到父div元素，並執行註冊在其上的事件處理函式，所以點選子元素，target屬性返回子元素，currentTarget屬性返回當前處理該事件的元素，也就是註冊事件處理函式的元素，外層div元素。

特別說明：上面介紹的都是原生JavaScript中的概念，很多庫可能已經將其修改。

屬性的使用案例：

最常見的是利用事件冒泡來實現委託效果，所謂的委託，就是讓自己的事情委託給別人辦理。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
table {
  width: 300px;
  height: 60px;
  background-color: green;
}
table td {
  background-color: white;
}
</style>
<script>
window.onload=function(){
  let otable=document.getElementsByTagName("table")[0];
  let odiv=document.getElementsByTagName("div")[0];
  otable.onclick=function(ev){
    odiv.innerHTML=ev.target.innerHTML;
  }
}
</script>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>單元格一</td>
    <td>單元格二</td>
    <td>單元格三</td>
    <td>單元格四</td>
  </tr>
  <tr>
    <td>單元格五</td>
    <td>單元格六</td>
    <td>單元格七</td>
    <td>單元格八</td>
  </tr>
</table>
<div></div>
</body>
</html>

上述程式碼點選單元格，會將其中的內容寫入div中。

程式碼分析如下：

（1）.我們並沒有將事件處理函式註冊在每一個td之上，而是利用事件冒泡註冊在table之上。

（2）.好處很明顯，效能比較好，程式碼也更為清爽，新新增的td元素具有同樣的功能。

（3）.利用target屬性即可獲取觸發事件的元素，也就是我們點選的單元格，然後將其內容寫入div。

上面就是委託，本來td單元格的活，交給table去做。

相關文章