javascript實現的對相容各個瀏覽器事件封裝

admin發表於2017-03-29
JavaScript瀏覽器事件封裝

可能題目沒有說清楚，這裡所謂的對事件封裝指的是實現相容各個瀏覽器的事件處理函式的註冊和刪除效果。

之所以進行相容處理，主要是因為低版本的IE瀏覽器存在相容性問題，對w3c標準的事件處理方式不支援，但是當前使用者又較多。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  width:200px;
  height:100px;
  background-color:green;
}
</style>
<script type="text/javascript">
function addEvent(elem, eventName, handler) {
  if (elem.attachEvent) {
　  elem.attachEvent("on" + eventName, function(){
　　  handler.call(elem)
    });
　　 //此處使用回撥函式call()，讓this指向elem
  } 
  else if (elem.addEventListener) {
　  elem.addEventListener(eventName, handler, false);
  }
}
function removeEvent(elem, eventName, handler) {
  if (elem.detachEvent) {
    elem.detachEvent("on" + eventName, function(){
      handler.call(elem)
    });
　　 //此處使用回撥函式call()，讓this指向elem
  } 
  else if (elem.removeEventListener) {
　  elem.removeEventListener(eventName, handler, false);
  }
}
window.onload=function(){
  var odiv=document.getElementById("antzone");
  var oadd=document.getElementById("add");
  var odel=document.getElementById("del");
  function handler(){
    this.style.backgroundColor="red";
  }
  oadd.onclick=function(){
    addEvent(odiv,"click",handler);
  }
  odel.onclick=function(){
    removeEvent(odiv,"click",handler);
  }
}
</script>
</head>
<body>
<div id="antzone"></div>
<input type="button" id="add" value="註冊事件處理函式"/>
<input type="button" id="del" value="刪除事件處理函式"/>
</body>
</html>

上面的程式碼實現了相容效果，下面介紹一下它的實現過程。

一.程式碼註釋:

1.function addEvent(elem, eventName, handler) {}，此函式實現了事件處理函式的註冊功能，第一個引數是要註冊事件處理函式的元素物件，第二個引數是事件處理函式的名稱，需要注意的是，前面不要加"on"，第三個引數是事件處理函式物件。

2.if (elem.attachEvent) {

  elem.attachEvent("on" + eventName, function(){

    handler.call(elem)

  });

}，如果支援elem.attachEvent的話，那麼我們可以認為它是低版本的IE瀏覽器（可能谷歌瀏覽器也支援，感興趣的朋友自行做一下測試），然後再使用attachEvent()函式祖冊事件處理函式。[

3.else if (elem.addEventListener) {

  elem.addEventListener(eventName, handler, false);

}，否則使用w3c標準的方式註冊事件處理函式。

二.相關閱讀:

1.attachEvent()函式可以參閱addEventListener()和attachEvent()一章節。

相關文章