javascript相容低版本IE瀏覽器的事件物件

admin發表於2017-04-08
JavaScript瀏覽器事件物件

在事件處理中，事件物件存在一定的相容性問題，下面就通過程式碼例項做一下簡單介紹。

先看一段程式碼例項:

[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:200px;
  height:200px;
  background-color:green;
}
</style> 
<script type="text/javascript">
window.onload=function() {
  var obox = document.getElementById("box");
  obox.onclick=function(){
    this.innerHTML=window.event.clientX;
  }
}
</script> 
</head> 
<body> 
<div id="box"></div>
</body> 
</html>

上面的程式碼能夠在IE10和IE10以下瀏覽器正確執行，在谷歌瀏覽器下也是可以的，但是在火狐瀏覽器下無法正確執行，因為它不支援window.event作為事件物件。程式碼修改如下:

[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:200px;
  height:200px;
  background-color:green;
}
</style> 
<script type="text/javascript">
window.onload=function() {
  var obox = document.getElementById("box");
  obox.onclick=function(ev){
    var ev=ev||window.event;
    this.innerHTML=ev.clientX;
  }
}
</script> 
</head> 
<body> 
<div id="box"></div>
</body> 
</html>

上面的這種方式就可以相容所有瀏覽器了。

事件物件標準的使用方式是需要通過事件處理函式進行傳遞，這種方式標準瀏覽器都支援，IE8和IE8以下瀏覽器不支援。

所以要做一下相容處理:

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

相關文章