Heim > Web-Frontend > js-Tutorial > Vertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript

Vertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript

yulia
Freigeben: 2018-10-11 10:12:34
Original
6992 Leute haben es durchsucht

JavaScript wird häufig in der Front-End-Entwicklung verwendet. Wissen Sie also, wie Sie das Klickereignis der JS-Schaltfläche festlegen? In diesem Artikel erfahren Sie mehr über die Verarbeitungsmethode von Click-Events in JS. Interessierte Freunde können einen Blick darauf werfen.

1. Verwenden Sie die Methode btn.click()

Die Methode btn.click() dient zum Klicken auf die Schaltfläche durch das Programm und löst so den Onclick-Befehl der Schaltfläche aus. )-Ereignis. Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Rendering:

Vertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript

2. Verwenden Sie die Methode addEvenListener()

addEventListener() Die Methode kann Ereignisse zum angegebenen Element hinzufügen. Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Rendering:

Vertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript

3 . Verwenden Sie die Methode btn.onclick=function( )

Methode btn.onclick() ruft einfach die Methode auf, auf die durch Klicken auf die Schaltfläche btn verwiesen wird, und löst das Ereignis nicht aus. Der Code lautet wie folgt:

<!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>
Nach dem Login kopieren

Rendering:

Vertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript

Das Obige stellt hauptsächlich die drei Verarbeitungsmethoden von Schaltflächenklickereignissen in JavaScript vor. Jede ist anders. Welche Methode Sie wählen sollten, hängt von Ihren Arbeitsanforderungen und persönlichen Gewohnheiten ab. Anfänger können es selbst ausprobieren. Ich hoffe, dieser Artikel kann Ihnen helfen.

Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonVertiefende Kenntnisse zum Umgang mit Schaltflächenklickereignissen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage