JavaScript事件綁定使用方法

這篇文章主要介紹了JavaScript事件綁定的方法,感興趣的可以參考一下。

當(dāng)你成功的時候,你說的所有話都是真理。 ——馬云

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

IE方式

attachEvent(事件名稱, 函數(shù)),綁定事件處理函數(shù)
detachEvent(事件名稱, 函數(shù)),解除綁定

DOM方式

addEventListener(事件名稱,函數(shù), 捕獲)
removeEventListener(事件名稱, 函數(shù), 捕獲)

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</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>

這段代碼,運行結(jié)果是彈出b,因為有兩個oBtn的點擊事件,但是只執(zhí)行了最后一個,這時候就體現(xiàn)出事件綁定的重要性了。

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>無標(biāo)題文檔</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> 

當(dāng)你使用事件綁定的時候,那么兩次點擊事件都會執(zhí)行,只是執(zhí)行順序在不同瀏覽器是不同的。在IE中是自下而上執(zhí)行,而在其他瀏覽器中是自上而下,不過由于alert的特殊性我們可以看出差別,其他語句基本等同于沒有差別,但是在對于一些對時間要求嚴(yán)格是事件的使用時還是需要注意的。

1、將代碼整理成函數(shù),便于使用:

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

2、如果需要使用多個window.onload事件其實就和使用多個oBtn.onclick事件差不多了。如下調(diào)用函數(shù)

myAddEvent(window,'load',function () 
{ 
  alert('a'); 
}); 
myAddEvent(window,'load',function () 
{ 
  alert('b');
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,716評論 1 11
  • 第2章 基本語法 2.1 概述 基本句法和變量 語句 JavaScript程序的執(zhí)行單位為行(line),也就是一...
    悟名先生閱讀 4,616評論 0 13
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,544評論 0 21
  • @轉(zhuǎn)自GitHub 介紹js的基本數(shù)據(jù)類型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou閱讀 1,342評論 0 0
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 905評論 0 3

友情鏈接更多精彩內(nèi)容