onclick與click事件的區別

admin發表於2018-11-09
事件

看到經常有朋友問，onclick事件與click事件有什麼區別。

此種情況基本是出現在初學者身上，當年作者本人也有類似的疑問。

其實這是一個非常搞笑的問題，世上本沒有onclick事件。

但是總有人如此稱呼，並且聽起來很順耳，沒有任何違和感。

比如還有change事件被稱作為onchange事件，keydow事件被稱作為onkeydow事件。

以此類推，幾乎所有的事件的名稱前面都被新增了一個"on"，準確的說，事件的名稱新增on是錯誤的。

之所以經常出現上述稱謂，主要是因為早前註冊事件處理函式方式引起的。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  let count=0;
  obt.onclick=function(){
    odiv.innerHTML=++count;
  }
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="檢視演示"/>
<div id="show"></div>
</body> 
</html>

程式碼核心截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/09/234013yegmc27gxmq2ss82.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

看到這裡，可以想到稱呼click事件為onclick事件似乎也理所當然。

再看一種比較古老的註冊事件處理函式的方式：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
let count=0;
function func(){
  let odiv=document.querySelector("#show");
  odiv.innerHTML=++count;
}
</script> 
</head> 
<body> 
<input type="button" onclick="func()" value="檢視演示"/>
<div id="show"></div>
</body> 
</html>

直接通過HTML標籤屬性方式註冊事件處理函式，又一次加強了"onclick"這個名字的正確性。

需要特別說明的是，上面方式各個瀏覽器都支援，使用起來也很方便，但最不推薦使用。

主要原因如下：

（1）.讓HTML程式碼看起來更加繁瑣，違背表現與內容分離原則。

（2）.不利於程式碼的後期維護。

通過ES5新增的addEventListener方法註冊事件處理函式，還原了事件的本來該有的名稱。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script> 
window.onload=function(){
  let obt=document.querySelector("#bt");
  let odiv=document.querySelector("#show");
  let count=0;
  function func(){
    odiv.innerHTML=++count;
  }
  obt.addEventListener("click",func,false);
}
</script> 
</head> 
<body> 
<input type="button" id="bt" value="檢視演示"/>
<div id="show"></div>
</body> 
</html>

可以看到事件名稱前面已經沒有了"on"，加"on"是錯誤的。

介紹到這裡，大家應該很清楚onclick與click之間的區別與聯絡了。

更多註冊事件處理函式方式參閱JavaScript 註冊事件處理函式一章節。

相關文章