原生javascript如何獲取觸發事件的物件

antzone發表於2017-03-21
JavaScript事件物件

在實際應用中可能需要明確知道具體是哪個元素觸發了事件，下面就通過程式碼例項介紹一下如何實現此功能，並且能夠相容各個主流瀏覽器，希望能夠給需要的朋友帶來幫助。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#thetable{
  background-color:green;
  font-size:12px;
}
#thetable th{
  text-align:center;
  height:30px;
  line-height:30px;
}
#thetable td{
  width:150px;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#FFF;
}
</style>
<script type="text/javascript"> 
window.onload=function(){
  var otable=document.getElementById("thetable");
  var odiv=document.getElementById("thediv");
  otable.onclick=function(ev){
    var ev=ev||window.event;
var target=ev.target||ev.srcElement;
if(target.tagName=="TD"){
   odiv.innerHTML=target.innerHTML;
    }
  }
}
</script>
</head>
<body>
<div id="thediv">此處顯示點選標籤的內容</div>
<table id="thetable">
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
  </tr>
  <tr>
    <td>螞蟻部落四</td>
    <td>螞蟻部落五</td>
    <td>螞蟻部落六</td>
  </tr>
</table>
</body>
</html>
程式碼實現了要求，點選單元格可以講指定單元格中的內容寫入div。
相關閱讀:
1.onclick事件可以參閱javascript click 事件一章節。
2.var ev=ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。
3.ev.target可以參閱javascript event.target一章節。
4.ev.srcElement可以參閱javascript event.srcElement一章節。
5.tagName屬性可以參閱javascipt tagName一章節。
6.innerHTML屬性可以參閱js innerHTML一章節。

相關文章