首頁 >web前端 >js教程 >深入理解JavaScript中按鈕點擊事件的處理方法

深入理解JavaScript中按鈕點擊事件的處理方法

yulia原創: 2018-10-11 10:12:346987瀏覽

JavaScript在前端開發中被廣泛使用，那你知道如何設定JS按鈕的點擊事件嗎？這篇文章就跟大家聊聊JS中點擊事件onclick的處理方法，具有一定的參考價值，有興趣的朋友可以看看。

一、用btn.click()方法

btn.click()方法是透過程式來點擊按鈕，從而觸發了按鈕的onclick（）事件，程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button onclick="myFunction()">点我</button>
 </body>
 <script type="text/javascript">
  function myFunction(){
   alert("have a nice day ")
  }
 </script>  
</html>

效果圖：

深入理解JavaScript中按鈕點擊事件的處理方法

二、用addEvenListener()方法

##addEventListener()方法可以在指定的元素中加入事件，程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button id="btn">点击</button>
 </body>
 <script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.addEventListener(&#39;click&#39;,function(){
   alert("技术是我一生的追求");
  },false)
 </script>
</html>

效果圖：

深入理解JavaScript中按鈕點擊事件的處理方法

#三、用btn.onclick=function( )方法

btn.onclick()方法只是簡單地呼叫了btn按鈕的onclick所指向的方法，它並沒有觸發事件。程式碼如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <button id="btn">click</button>
 </body>
 <script type="text/javascript">
  var btn = document.getElementById("btn");
  btn.onclick=function(){
   alert("欢迎大家来PHP中文网学习");
  }
 </script>
</html>

效果圖：

深入理解JavaScript中按鈕點擊事件的處理方法

以上主要介紹了JavaScript中按鈕點擊事件的三種處理方法，各有不同，至於選擇哪種方法，也需要看工作需求和個人習慣，初學者可以自己嘗試，希望這篇文章可以幫助你！

更多相關教學請造訪

JavaScript影片教學

以上是深入理解JavaScript中按鈕點擊事件的處理方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Ajax是什麼意思？ Ajax怎麼用？下一篇：Ajax是什麼意思？ Ajax怎麼用？

看更多