javascript相容各個瀏覽器的獲取事件源物件程式碼

螞蟻小編發表於2017-03-25
JavaScript瀏覽器事件物件

所謂事件源物件就是觸發事件的物件，比如我們有可能將事件處理函式註冊在表格table物件上，當點選單元格td的時候，會根據事件冒泡原理傳遞到table物件上，並執行註冊在table上的事件處理函式，有時候我們也需要明確的知道是到底是點選了哪一個單元格，那麼事件源物件就非常重要了。

程式碼如下:

[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.getElementsByTagName("table")[0];
  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"> 
  <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>

上面的程式碼實現了我們的要求，點選單元格可以獲取單元格中的內容，並寫入div。

使用如下程式碼即可實現事件源物件的相容:

[JavaScript] 純文字檢視 複製程式碼
var ev=ev||window.event;
var target=ev.target||ev.srcElement;

相關文章