JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

JavaScriptとHTMLのやり取りは、ユーザーやブラウザがページを操作した際に発生する「イベント」を通じて処理されます。

たとえば、ページが読み込まれること自体もイベントの一つです。ユーザーがボタンをクリックすれば、そのクリックもイベントとして扱われます。このほかにも、キーボードのキーを押す、ウィンドウを閉じる、ウィンドウのサイズを変更するなど、さまざまな操作がイベントとして検出されます。

onclickイベントとは

onclick()イベントは、ユーザーがマウスの左ボタンをクリックした瞬間に発生するイベントです。フォーム送信前の入力値チェック（バリデーション）や、警告メッセージの表示など、クリックをきっかけに実行したい処理は、このイベントに対して記述するのが一般的です。

クリックイベントでJavaScript関数を呼び出す方法をわかりやすく解説

実装例：クリックで関数を呼び出す

以下のコードを実行すると、ボタンをクリックしたタイミングでJavaScriptの関数が呼び出され、アラートが表示される動作を確認できます。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("Demo Alert")
            }
         //-->
      </script>
   </head>
   <body>
      <p>次のボタンをクリックして結果を確認してください</p>
      <form>
         <input type="button" onclick="sayHello()" value="Click" />
      </form>
   </body>
</html>

コードのポイント

  • 関数の定義： head内のscriptタグの中で、sayHello()という関数を定義しています。この関数が呼ばれるとalert()によってダイアログが表示されます。
  • イベントの紐付け： input要素にonclick="sayHello()"と指定することで、ボタンがクリックされたときに関数が実行されるようになります。

このように、HTML要素のonclick属性に関数名を指定するだけで、簡単にクリックイベントとJavaScript関数を連携させることができます。初心者の方も、まずはこの基本形を覚えておくと良いでしょう。

  1. HTMLボタンでJavaScript関数を呼び出す方法【初心者向けに解説】

    HTMLボタンでJavaScript関数を呼び出す最も簡単な方法HTMLのボタンからJavaScript関数を呼び出すには、button要素やinput要素のイベントハンドラ属性（onclickなど）に、実行したい関数をそのまま記述します。最もシンプルな書き方は以下のとおりです。<input type=button value=クリック onclick=myFunction(); />ダブルクリックをトリガーにしたい場合は、ondblclick属性を使用します。<input type=button value=クリック ondblclick=myFunction(); /&g

  2. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ