DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解javascript事件綁定使用方法
詳解javascript事件綁定使用方法
編輯:關於JavaScript     

由於html是從上至下加載的,通常我們如果在head部分引入javascript文件,那麼我們都會在javascript的開頭添加window.onload事件,防止在文檔問加載完成時進行DOM操作所出現的錯誤。如果有多個javascript文件,那麼極有可能出現多個window.onload事件,但是最後起作用的只有一個,這時候就需要使用事件綁定來解決這個問題了。

IE方式
attachEvent(事件名稱, 函數),綁定事件處理函數
detachEvent(事件名稱, 函數),解除綁定

DOM方式
addEventListener(事件名稱,函數, 捕獲)
removeEventListener(事件名稱, 函數, 捕獲)

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標題文檔</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  oBtn.onclick=function () 
  { 
    alert('a'); 
  }; 
   
  oBtn.onclick=function () 
  { 
    alert('b'); 
  }; 
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按鈕" /> 
</body> 
</html> 

這段代碼,運行結果是彈出b,因為有兩個oBtn的點擊事件,但是只執行了最後一個,這時候就體現出事件綁定的重要性了。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標題文檔</title> 
<script> 
window.onload=function () 
{ 
  var oBtn=document.getElementById('btn1'); 
  //IE浏覽器 
  if(oBtn.attachEvent) 
  { 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('a'); 
    }); 
    oBtn.attachEvent('onclick', function () 
    { 
      alert('b'); 
    }); 
  } 
  //其他浏覽器 
  else 
  { 
    oBtn.addEventListener('click', function () 
    { 
      alert('a'); 
    }, false); 
    oBtn.addEventListener('click', function () 
    { 
      alert('b'); 
    }, false); 
  } 
   
}; 
</script> 
</head> 
<body> 
<input id="btn1" type="button" value="按鈕" /> 
</body> 
</html> 

當你使用事件綁定的時候,那麼兩次點擊事件都會執行,只是執行順序在不同浏覽器是不同的。在IE中是自下而上執行,而在其他浏覽器中是自上而下,不過由於alert的特殊性我們可以看出差別,其他語句基本等同於沒有差別,但是在對於一些對時間要求嚴格是事件的使用時還是需要注意的,比如之前有一篇文章圖片輪播中的setInterval對時間的細微的差別最後導致滾動混亂。 基於原生javascript的圖片輪播domo

最後將我們的代碼整理成函數,便於之後的使用

function myAddEvent(obj, ev, fn) 
{ 
  if(obj.attachEvent) 
  { 
    obj.attachEvent('on'+ev, fn); 
  } 
  else 
  { 
    obj.addEventListener(ev, fn, false); 
  } 
} 

這時候如果需要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差不多了。如下調用函數即可。

myAddEvent(window,'load',function () 
{ 
  alert('a'); 
}); 
myAddEvent(window,'load',function () 
{ 
  alert('b'); 

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved