Home > Article > Web Front-end > In-depth understanding of how to handle button click events in JavaScript

In-depth understanding of how to handle button click events in JavaScript

yuliaOriginal: 2018-10-11 10:12:346924browse

JavaScript is widely used in front-end development, so do you know how to set the click event of the JS button? This article will talk to you about the processing method of click event onclick in JS. It has certain reference value. Interested friends can take a look.

1. Use the btn.click() method

The btn.click() method is to click the button through the program, thereby triggering the button's onclick() event. The code is as follows:

<!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>

Rendering:

In-depth understanding of how to handle button click events in JavaScript

2. Use the addEvenListener() method

addEventListener() The method can add events to the specified element. The code is as follows:

<!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>

Rendering:

In-depth understanding of how to handle button click events in JavaScript

3. Use btn.onclick=function( )Method

btn.onclick() method simply calls the method pointed to by onclick of the btn button. It does not trigger the event. The code is as follows:

<!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>

Effect picture:

In-depth understanding of how to handle button click events in JavaScript

The above mainly introduces the three processing methods of button click events in JavaScript. Each one is different. As for which one to choose? Each method depends on work needs and personal habits. Beginners can try it themselves. I hope this article can help you!

For more related tutorials, please visit JavaScript Video Tutorial

The above is the detailed content of In-depth understanding of how to handle button click events in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What does Ajax mean? How to use Ajax?Next article：What does Ajax mean? How to use Ajax?

See more

In-depth understanding of how to handle button click events in JavaScript

Related articles