event.relatedTarget

admin發表於2018-11-08

假設A國與B國相鄰，中間有一條邊境線。

當某人從A國跨過國境線進入B國，那麼兩個國家就產生了關聯。

不同角度可以有不同的理解，例如以下兩種闡述：

（1）.以A國角度看，此人進入B國。

（2）.以B國角度看，此人來自A國。

對於JavaScript中的有些事件涉及的元素，也有類似的關係。

而事件物件的relatedTarget屬性就是用來相關聯的元素，分析如下：

（1）.如果是mouseover事件，B元素註冊mouseover事件處理函式，滑鼠指標從A元素移入B元素，事件觸發，那麼從B元素角度來看，滑鼠指標來自於A元素，那麼relatedTarget屬性返回A元素。

（2）.如果是mouseout事件，B元素註冊mouseout事件處理函式，滑鼠指標從B元素移入A元素，事件觸發，那麼從B元素角度來看，滑鼠指標進入A元素，那麼relatedTarget屬性返回A元素。

特別說明：

（1）.都是以註冊事件處理函式的元素為角度看。

（2）.此屬性僅對mouseover事件和mouseout事件有效。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
event.relatedTarget

瀏覽器支援:

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.opera瀏覽器支援此屬性。

（5）.火狐瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:150px;
  height:150px;
  background-color:blue;
}
#ant{
  width:80px;
  height:50px;
  background-color:red;
}
</style> 
<script> 
window.onload=function(){ 
  let ant=document.getElementById("ant"); 
  ant.onmouseover=function(ev){ 
    this.innerHTML=ev.relatedTarget.id;
  } 
} 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="ant"></div> 
</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/120605pnvi5nd55cnk7laj.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.為子元素註冊mouseover事件處理函式。

（2）.當滑鼠從父元素移入子元素的時候，那麼從子元素的視角看，父元素與其產生關聯。

（3）.那麼，relatedTarget的返回值是父元素物件。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css"> 
#box{
  width:150px;
  height:150px;
  background-color:blue;
}
#ant{
  width:80px;
  height:50px;
  background-color:red;
}
</style> 
<script> 
window.onload=function(){ 
  let ant=document.getElementById("ant"); 
  ant.onmouseout=function(ev){ 
    this.innerHTML=ev.relatedTarget.id;
  } 
} 
</script> 
</head> 
<body> 
<div id="box"> 
  <div id="ant"></div> 
</div> 
</body> 
</html>

對於mouseout事件也是相同的道理。

以註冊事件處理函式的子元素視角來看，滑鼠指標移入了它的父元素。

很自然relatedTarget屬性的返回值是父元素物件。

相關文章