Compréhension approfondie de la façon de gérer les événements de clic sur un bouton en JavaScript-js tutoriel-php.cn

Compréhension approfondie de la façon de gérer les événements de clic sur un bouton en JavaScript

yulia

Libérer： 2018-10-11 10:12:34

original

7012 Les gens l'ont consulté

JavaScript est largement utilisé dans le développement front-end, alors savez-vous comment définir l'événement click du bouton JS ? Cet article vous parlera de la méthode de traitement de l'événement click onclick dans JS. Il a une certaine valeur de référence. Les amis intéressés peuvent y jeter un œil.

1. Utilisez la méthode btn.click()

La méthode btn.click() consiste à cliquer sur le bouton via le programme, déclenchant ainsi l'onclick( ) événement. Le code est le suivant :

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

Copier après la connexion

Rendu :

Compréhension approfondie de la façon de gérer les événements de clic sur un bouton en JavaScript

2. Utilisez la méthode addEvenListener() <. 🎜>

La méthode addEventListener() peut ajouter des événements aux éléments spécifiés, le code est le suivant :

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

Copier après la connexion

Rendu :

Compréhension approfondie de la façon de gérer les événements de clic sur un bouton en JavaScript

3. Utilisez la méthode btn. onclick=function()

La méthode btn.onclick() appelle simplement la méthode pointée par onclick du bouton btn, et elle ne déclenche pas l'événement. Le code est le suivant :

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

Copier après la connexion

Rendu :

Compréhension approfondie de la façon de gérer les événements de clic sur un bouton en JavaScript

Ce qui précède présente principalement les trois méthodes de traitement des événements de clic de bouton en JavaScript, dont chacune est différent. Quant à la méthode à choisir, cela dépend des besoins professionnels et des habitudes personnelles. J'espère que cet article pourra vous aider !

Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!