JavaScript でのボタンクリックイベントの処理方法についての深い理解-jsチュートリアル-php.cn

JavaScript でのボタンクリックイベントの処理方法についての深い理解

yulia

リリース： 2018-10-11 10:12:34

オリジナル

6936 人が閲覧しました

JavaScript はフロントエンド開発で広く使用されていますが、JS ボタンのクリックイベントを設定する方法をご存知ですか?この記事では、JS でのクリックイベントの処理方法について説明します。興味のある方はご覧ください。

1. btn.click() メソッドを使用します

btn.click() メソッドは、プログラムを通じてボタンをクリックし、それによってボタンの onclick( ) イベントのコードは次のとおりです:

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

ログイン後にコピー

レンダリング:

JavaScript でのボタンクリックイベントの処理方法についての深い理解

2 addEvenListener() メソッドを使用します。 addEventListener() このメソッドは、指定された要素にイベントを追加できます。コードは次のとおりです。

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

ログイン後にコピー

レンダリング:

JavaScript でのボタンクリックイベントの処理方法についての深い理解

3 btn.onclick=function() メソッドを使用します。

btn.onclick() メソッドは、btn ボタンの onclick で指定されたメソッドを呼び出すだけで、イベントはトリガーされません。コードは次のとおりです。

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

ログイン後にコピー

エフェクト画像:

JavaScript でのボタンクリックイベントの処理方法についての深い理解上記では主に JavaScript におけるボタンクリックイベントの 3 つの処理方法を紹介します。それぞれ異なります。どれを選択するかは、仕事のニーズと個人の習慣によって異なります。この記事が役立つことを願っています。