js獲取事件源物件程式碼例項

antzone發表於2017-03-24
JS事件物件

所謂的事件源物件就是事件觸發的物件，比如我們點選一個按鈕，那麼這個按鈕就是事件源物件，但是有時候我們可能利用事件冒泡原理將事件處理函式註冊在父級元素上，無論點選哪個子元素都會執行事件處理函式，有時候我們想要明確的知道是哪個物件觸發的事件，下面就通過程式碼例項介紹一下如何實現此效果，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
.table{ 
  width:300px; 
  height:100px; 
  border:1px solid #ccc; 
  border-collapse:collapse; 
} 
.table td,.table th { 
  border:1px solid #ccc; 
  padding:5px; 
} 
</style> 
<script type="text/javascript">
window.onload=function(){
  var otable=document.getElementById("tb");
  var oshow=document.getElementById("show");
  otable.onclick=function(ev){
    var ev= ev||window.event; 
    var target=ev.target||ev.srcElement; 
    oshow.innerHTML=target.innerHTML;
  }
}
</script>
</head> 
<body> 
<div id="show"></div>
<table class="table" id="tb"> 
  <thead> 
    <tr> 
      <th>螞蟻部落一</th> 
      <th>螞蟻部落二</th> 
    </tr> 
  </thead> 
  <tr> 
    <td>javascript教程</td> 
    <td>jQuery教程</td> 
  </tr> 
  <tr> 
    <td>HTML教程</td> 
    <td>div css教程</td> 
  </tr> 
</table> 
</body> 
</html>

以上程式碼實現了我們的要求，點選單元格可以獲取響應單元格中的內容。

相關閱讀:

1.var ev= ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。 

2.ev.target屬性可以參閱javascript event.target一章節。 

3.ev.srcElement屬性可以參閱javascript event.srcElement一章節。 

4.innerHTML屬性可以參閱js innerHTML一章節。 

相關文章