In-depth understanding of how to handle button click events in JavaScript-JS Tutorial-php.cn

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

yulia

Release： 2018-10-11 10:12:34

Original

7011 people have browsed it

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>

Copy after login

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>

Copy after login

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>

Copy after login

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!