cari

Rumah >hujung hadapan web >tutorial js >深入理解JavaScript中按钮点击事件的处理方法

深入理解JavaScript中按钮点击事件的处理方法

yulia
yuliaasal
2018-10-11 10:12:347015semak imbas

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>

效果图：

图片1.jpg

二、用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>

效果图：

图片3.jpg

三、用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>

效果图：

图片2.jpg

以上主要介绍了JavaScript中按钮点击事件的三种处理方法，各有不同，至于选择哪种方法，还需要看工作需要和个人习惯，初学者可以自己动手尝试，希望这篇文章可以帮助到你！

 更多相关教程请访问 JavaScript视频教程

Atas ialah kandungan terperinci 深入理解JavaScript中按钮点击事件的处理方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Ajax是什么意思？Ajax怎么用？Artikel seterusnya：ajax的同步和异步有怎样的区别？ajax同步与异步的区别介绍

Artikel berkaitan

Lihat lagi