相容所有瀏覽器的獲取事件源物件程式碼

admin發表於2017-03-31
瀏覽器事件物件

大家知道早期的IE瀏覽器和標準瀏覽器存在著不小的差異，當然本文章不會一一介紹，那樣的話，量實在有點大。

下面介紹一下如何實現相容所有主流瀏覽器的獲取事件源物件。

所謂的事件源物件就是當前觸發事件的物件，比如click事件的源物件，就是滑鼠點選的元素。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>螞蟻部落</title>  
<style type="text/css"> 
#thediv{
  width:200px;
  height:100px;
  background:#CCC;
  text-align:center;
  line-height:100px;
}
</style> 
<script>
window.onload=function(){
  var odiv=document.getElementsByTagName("div")[0];
  odiv.onclick=function(ev){
    var ev=ev||window.event;
    var target=ev.target||ev.srcElement;
    odiv.innerHTML=target.id;
  }
}
</script>
</head> 
<body> 
<div id="thediv"></div>
</body> 
</html>

上面的程式碼實現了我們的要求，當點選div的時候，能夠獲取當前點選div的id屬性值。

相關閱讀:

1.document.getElementsByTagName()方法可以參閱document.getElementsByTagName()一章節。

2.onclick事件可以參閱javascript click 事件一章節。

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

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

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

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

相關文章