onclick イベントを使用した JavaScript 関数の呼び出し

Nithin Krishnan 2023年10月12日
  1. onclick イベントハンドラーを使用した JavaScript 関数の呼び出し
  2. 純粋な JavaScript を使用して JavaScript 関数を HTML 要素にアタッチする
  3. HTML 要素の onclick イベントハンドラーで関数を定義する
  4. addEventListener を使用した JavaScript 関数の呼び出し
onclick イベントを使用した JavaScript 関数の呼び出し

Web ページの静的 HTML コンテンツを設計する場合でも、ユーザーがインタラクティブにできるようにしたい場合があります。HTML 要素は、デフォルトではダムです。<a> タグはユーザーインタラクティブですが、主に特定のパスをロードするために使用されます。div のような HTML 要素は、イベントハンドラーを追加することで、ユーザーがインタラクティブにすることができます。onclick イベントハンドラーと呼ばれるそのようなイベントハンドラーの 1つについて説明します。HTML 要素に追加する方法はいくつかあります。

onclick イベントハンドラーを使用した JavaScript 関数の呼び出し

HTML の onclick イベントハンドラーを使用するか、JavaScript のイベントハンドラーをアタッチすることで、JavaScript 関数を div にバインドできます。イベントハンドラーを div 要素にアタッチする次のコードを参照してみましょう。

<div id="interactive-div" onclick="changeMyColor('interactive-div')" style="cursor: pointer;">Click me</div>
function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

div 要素は、デフォルトではクリックイベントを受け入れません。このコードでは、JavaScript 関数 changeMyColor()divonclick イベントハンドラーにバインドします。これで、div をクリック可能になります。onclick イベントハンドラーを div に定義しても、ユーザーは、クリックしない限り、div がクリックを受け入れるかどうかを知りません。ユーザーがターゲット div にカーソルを合わせたら、カーソルのマークを変えるのは良い UI / UX です。この目的のために、インラインスタイル style="cursor: pointer;"div 要素に割り当てます。ユーザーが div にカーソルを合わせると、カーソルにクリック可能であることを示す手の記号が表示されます。

function changeMyColor(id) {
  var el = document.getElementById(id);
  el.style.color = 'blue';
}

JavaScript コードでは、divonclick イベントに渡される関数 changeMyColor() を定義します。この関数は、div の ID をパラメーターとして受け取ります。document.getElementById(id) を使用して要素を選択し、el.style.color = "blue"; の行を使用して要素のフォントの色を blue に変更します。そのため、JavaScript 関数を div に割り当て、クリック可能にしました。

純粋な JavaScript を使用して JavaScript 関数を HTML 要素にアタッチする

最後のアプローチでは、HTML で onclick イベントハンドラーを宣言しました。HTML で onclick イベントハンドラーを指定せずに、HTML をクリーンに保ち、JavaScript 関数を div または対応する HTML 要素にアタッチする方法があります。ここでは、HTML を使用するのではなく、JavaScript でクリックイベントを割り当てます。したがって、このアプローチは純粋に JavaScript ベースであり、HTML をクリーンに保ちます。このようなプログラミングスタイルは、控えめな JavaScript と呼ばれます。概念をよりよく理解するには、次のコードを参照してください。

<div id="interactive-div" style="cursor: pointer;">Click me</div>
window.onload =
    function() {
  var el = document.getElementById('interactive-div');
  el.onclick = changeMyColor;
}

function changeMyColor() {
  var el = document.getElementById('interactive-div');
  el.style.color = 'blue';
}

上記のコードを参照して、前のコードサンプルと同様の HTML を維持しました。HTML に onclick イベントハンドラーを追加しませんでした。代わりに、JavaScript で onclick イベントハンドラーを定義し、JavaScript コードに同じ関数 changeMyColor をアタッチしました。ここで注意すべき点がいくつかあります。

  • window.onload 内に onclick イベントリスナーをアタッチします。window.onload メソッドを使用しない場合、Uncaught TypeError: Cannot set property 'onclick' of null というエラーがスローされます。これは、HTML の読み込み中に、document.getElementById("interactive-div")id interactive-div の要素をクエリしようとするために発生します。<script> タグは <head> セクションにあるため、JavaScript コードは、<body> タグにある div を実際にロードする前に、<script> タグの内容を実行します。したがって、getElementById() 関数は要素を検出せず、null を返します。したがって、null の onclick を設定できないというエラーが発生します。
  • もう 1つの注意点は、関数を括弧 () なしで onclick イベントハンドラーに割り当てることです。el.onclick = changeMyColor(); と書くと el.onclick = changeMyColor; の代わりに、HTML のロード時に関数を実行しますが、これは必要なものではありません。したがって、changeMyColor の関数参照を onclick イベントハンドラーに渡します。ユーザーが div をクリックして onclick イベントをトリガーすると、関数呼び出し changeMyColor が発生します。そして、div が青に変わります。

HTML 要素の onclick イベントハンドラーで関数を定義する

onclick イベントで JavaScript 関数を呼び出す方法は他にもいくつかあります。メソッドは HTML で定義できます。ただし、HTML が乱雑になるため、推奨される方法ではありません。理解を深めるには、次のコードを参照してください。

<div onclick="(function() { alert('hello there'); })()" style="cursor: pointer;">click me!</div>

div をクリックすると、上記のコードは helloworld テキストをポップアップ表示します。ここでは、関数定義を HTML でインラインコーディングします。匿名のインライン方式です。また、名前が関連付けられていないため、他の場所で同じ関数を使用することはできません。関数の定義が長くなると面倒になり、コードの可読性が低下します。

addEventListener を使用した JavaScript 関数の呼び出し

onclick イベントハンドラーを追加する 1つの方法は、onclick 関数を使用することでした。より一般的で、さらに多くのイベントリスナーを追加するために使用できる別の方法があります。そのために、JavaScript の .addEventListener() 関数を使用します。この関数は、elementdocument インターフェイス、またはウィンドウオブジェクトで使用できます。.addEventListener() 関数を使用して、特定のイベントがトリガーされたときにメソッド呼び出しを設定できます。

  • パラメータ:いくつかの必須パラメータが必要です。たとえば、click などのイベントのタイプと、listener 関数です。listener 関数は、イベントがトリガーされたときに実行されます。
  • 使用法:次のコードを参照してください。
<div style="cursor: pointer;" id="interactive-div">click me!</div>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('interactive-div')
      .addEventListener('click', function() {
        alert('hello');
      });
});

このコーディングスタイルは、純粋に JavaScript ベースの控えめな JavaScript プログラミングです。ここでは、.addEventListener() 関数を使用して click リスナーを追加しました。これを機能させるには、.getElementById("interactive-div") が要素を返すことを確認する必要があります。したがって、document インターフェイスの DOMContentLoaded イベントリスナーでコードをラップします。それ以外の場合、コードは eventnull オブジェクトに追加できないというエラーをスローします。