js中點擊事件方法三種方式的區別


在javascript中,可以為某個元素指定事件,指定的方式有以下三種:
1、在html中,使用onclick屬性
2、在javascript中,使用onclick屬性
(1)注意函數名沒有雙引號。
3、在javascipt中,使用addEvenListener()方法

三種方法的比較
(1)在第二、三種方法中,可以向函數傳入一個event對象,並讀取其相應屬性,而方法一不可以。

一些語法細節
(1)在第一種方法中,onclick大小寫無關,但在第二種方法中,必須使用小寫。因為HMTL對大小寫不敏感,而JS則會區分大小寫。
(2)在第二、三種方法中,指定函數名時沒有雙引號,而第一種作為一個HTML屬性,需要雙引號。
(3)第一種方法需要括號,第二、三種不需要。
    onclick="clickHandler()"
   document.getElementById("jsOnClick").onclick = clickHandler2; 
   document.getElementById("adEventListener").addEventListener("click",clickHandler2);
完整代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Even Deom</title>

</head>
<body>
 <button id="htmlOnClick" onclick="clickHandler()">htmlOnClick</button>
 <button id="jsOnClick">jsOnClick</button>
 <button id="addEventListener">addEventListener</button>
 
 <script defer>
 function clickHandler() {
  alert("onclick attribute in html");
 }
 function clickHandler2(e) {
  alert(e.target.innerHTML);
 }
 document.getElementById("jsOnClick").onclick = clickHandler2;
 document.getElementById("addEventListener").addEventListener("click",
   clickHandler2);
</script>
</body>
</html>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM