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

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

yuliaoriginal: 2018-10-11 10:12:346925parcourir

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>

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Que veut dire Ajax ? Comment utiliser Ajax ?Article suivant：Que veut dire Ajax ? Comment utiliser Ajax ?

Articles Liés

Voir plus