原生js為元素繫結事件的幾種方式

螞蟻小編發表於2017-03-27
JS事件

為指定元素繫結事件處理函式是必須要掌握的技能，因為這都是基礎性的技能，所以也沒有什麼難度，知道了就知道了。

繫結事件處理函式有比較常用的三種方式，下面就以click點選事件為例子做一下簡單介紹。

一.直接寫在html標籤中:

我們們就不管這種方式的正式術語是怎麼回事，反正是這麼回事，直接看程式碼:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
function done(){
  var odiv=document.getElementById("atnzone");
  odiv.innerHTML="螞蟻部落";
}
</script>
</head> 
<body> 
<div id="atnzone"></div>
<input type="button" value="檢視效果"/>
</body> 
</html>

上面的程式碼實現了我們的要求，將事件處理函式的註冊直接寫在標籤之內。

此種方式通常比較簡單，但是並不推薦使用，因為違反了表現和內容分離的原則。

二.使用onclick屬性方式:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript"> 
window.onload=function(){
  var obt=document.getElementById("bt");
  var odiv=document.getElementById("antzone");
  obt.onclick=function(){
    odiv.innerHTML="螞蟻部落";
  }
}
</script>
</head> 
<body> 
<div id="atnzone"></div>
<input type="button" id="bt" value="檢視效果"/>
</body> 
</html>

onclick就是元素的一個屬性而已，不要感覺太過神祕，只不過是javascript規定好的。

三.使用addEventListener()函式:

關於此方式，這裡不打算介紹了，可以參閱相關的章節。

addEventListener()函式可以參閱addEventListener()和attachEvent()函式的用法一章節。

相關文章