onclick イベントを使用した JavaScript 関数の呼び出し
-
onclickイベントハンドラーを使用した JavaScript 関数の呼び出し - 純粋な JavaScript を使用して JavaScript 関数を HTML 要素にアタッチする
-
HTML 要素の
onclickイベントハンドラーで関数を定義する -
addEventListenerを使用した 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() を div の onclick イベントハンドラーにバインドします。これで、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 コードでは、div の onclick イベントに渡される関数 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")がidinteractive-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() 関数を使用します。この関数は、element、document インターフェイス、またはウィンドウオブジェクトで使用できます。.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 イベントリスナーでコードをラップします。それ以外の場合、コードは event を null オブジェクトに追加できないというエラーをスローします。