はじめに
JavaScript イベント処理の実験へようこそ！イベントとは、ユーザーがボタンをクリックしたり、マウスを移動したり、キーを押したりするなど、ブラウザで発生するアクションのことです。イベント処理とは、これらのイベントに応答するコードを記述するプロセスであり、Web ページをインタラクティブでダイナミックにします。
この実験では、JavaScript でイベントを処理するための基本的な方法を学びます。HTML の基本的な onclick 属性から始め、より強力で柔軟な addEventListener メソッドに進みます。また、event オブジェクトを使用してイベントの動作を制御し、イベントに関する情報を取得する方法も学びます。
この実験を終える頃には、以下のことができるようになります。
- HTML 要素にイベントハンドラーをアタッチする。
- JavaScript のロジックを HTML の構造から分離する。
- イベントのデフォルトのブラウザアクションを防ぐ。
- イベントをトリガーした要素を特定する。
始めましょう！
HTML 要素に onclick 属性を追加する
このステップでは、イベントを処理する最も直接的な方法、つまり HTML イベントハンドラー属性の使用方法を学びます。onclick 属性を使用すると、要素がクリックされたときに JavaScript コードの一部を実行できます。この方法はシンプルですが、一般的には HTML と JavaScript を分離する方が良い方法であり、これは次のステップで説明します。
まず、ボタンに onclick 属性を追加しましょう。
- WebIDE の左側にあるファイルエクスプローラーで、
index.htmlファイルを見つけて開きます。 <button>要素を探します。- ボタンタグを修正して、アラートを表示する
onclick属性を含めます。
修正後の <button> 要素は以下のようになります。
<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>
コードを追加したら、index.html ファイルを保存します。
変更を確認するには、インターフェースの上部にある Web 8080 タブに切り替えます。「Click Me」ボタンをクリックすると、「Button Clicked!」というメッセージが表示されたブラウザのアラートが表示されるはずです。
addEventListener をクリックイベントに使用する
このステップでは、イベント処理のモダンで推奨されるアプローチである addEventListener メソッドを使用します。このメソッドを使用すると、JavaScript コードを HTML マークアップに混在させることなく、要素にイベントハンドラーをアタッチできます。このプラクティスは「目立たない JavaScript (unobtrusive JavaScript)」として知られており、よりクリーンで保守性の高いコードにつながります。
まず、前のステップで追加した onclick 属性を削除して、HTML を整理しましょう。
index.htmlファイルを開きます。<button>要素からonclick属性を削除します。再び以下のようになります。
<button id="myButton">Click Me</button>
次に、JavaScript を使用してイベントリスナーを追加しましょう。
- ファイルエクスプローラーから
script.jsファイルを開きます。現在は空です。 script.jsに以下のコードを追加します。
const button = document.querySelector("#myButton");
button.addEventListener("click", () => {
alert("Clicked with addEventListener!");
});
このコードを分解してみましょう。
document.querySelector('#myButton'): この行は、IDmyButtonを使用して DOM からボタン要素を選択します。addEventListener('click', ...): このメソッドはボタン要素で呼び出されます。主に 2 つの引数を取ります。- 最初の引数は、リッスンするイベントのタイプです。この場合は
'click'です。 - 2 番目の引数は、イベントが発生したときに実行される「ハンドラー」または「リスナー」関数です。ここでは、無名のアロー関数
() => { ... }を使用しています。
- 最初の引数は、リッスンするイベントのタイプです。この場合は
script.js ファイルを保存し、Web 8080 タブに切り替えます。ボタンをクリックすると、「Clicked with addEventListener!」というメッセージが表示されたアラートが表示されるはずです。
イベントハンドラ関数を定義する
このステップでは、イベントハンドラーに名前付き関数を定義することで、コードをさらにクリーンで再利用可能にする方法を学びます。addEventListener の内部で直接無名関数を使用する代わりに、別の関数を定義し、その名前をリスナーに渡すことができます。
このアプローチは、イベント処理ロジックが複雑な場合や、同じ関数を複数のイベントや要素で再利用したい場合に役立ちます。
script.js ファイルを修正して、名前付き関数を使用しましょう。
script.jsファイルを開きます。- 既存のコードを以下に置き換えます。
const button = document.querySelector("#myButton");
function handleClick() {
button.textContent = "I was clicked!";
}
button.addEventListener("click", handleClick);
変更点は以下の通りです。
handleClickという新しい関数を定義しました。この関数には、ボタンがクリックされたときに実行されるロジックが含まれています。この例では、ボタンのテキストを変更しています。addEventListenerでは、2 番目の引数として関数名handleClickを渡しています。関数自体への参照を渡していることに注意してください（つまり、handleClickであり、handleClick()ではありません）。ブラウザは、クリックイベントが発生したときに私たちに代わって関数を呼び出します。
script.js ファイルを保存し、Web 8080 タブに移動します。ボタンをクリックします。今回は、アラートの代わりに、ボタンのテキストが「I was clicked!」に変更されるのが表示されるはずです。
preventDefault でデフォルトの動作を防止する
このステップでは、event オブジェクトとその最も便利なメソッドの 1 つである preventDefault() について学びます。イベントが発生すると、ブラウザは自動的にハンドラー関数に event オブジェクトを渡します。このオブジェクトにはイベントに関する情報が含まれており、その動作を制御できます。
一部の HTML 要素にはデフォルトの動作があります。たとえば、リンク (<a> タグ) のデフォルトの動作は、href 属性で指定された URL に移動することです。event.preventDefault() メソッドを使用すると、このデフォルトの動作を停止できます。
私たちの index.html ファイルには、ID myLink を持つリンクが既に含まれています。ナビゲーションを防止するために、それにイベントリスナーを追加しましょう。
script.jsファイルを開きます。- ファイルの末尾に以下のコードを追加します。
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
新しいコードを分析しましょう。
- ID
myLinkを持つ<a>要素を選択します。 - ハンドラー関数
handleLinkClickを定義します。この関数は、ブラウザによって提供されるイベントオブジェクトである 1 つのパラメーターを受け取ります。 - 関数内で
event.preventDefault()を呼び出して、ブラウザがリンクをたどるのを停止します。 - ハンドラーが実行されていることを確認するために、
console.logメッセージも追加します。
script.js ファイルを保存します。次に、Web 8080 タブに移動します。
- ページ上の任意の場所を右クリックし、「Inspect」を選択してブラウザの開発者ツールを開きます。
- 開発者ツール内の「Console」タブに切り替えます。
- 「Visit LabEx (link will be disabled)」リンクをクリックします。
2 つのことに気づくでしょう。ページは labex.io に移動せず、「Link click detected, navigation prevented.」というメッセージがコンソールに表示されます。
event.target でイベントターゲットにアクセスする
この最後のステップでは、event オブジェクトのもう 1 つの重要なプロパティである event.target について学びます。このプロパティは、イベントをトリガーした特定の要素への参照を提供します。これは非常に便利で、特に親要素に 1 つのイベントリスナーがあり、複数の子要素のイベントを管理している場合（イベント委譲と呼ばれるテクニック）に役立ちます。
この実験では、event.target をより単純なコンテキストで使用します。つまり、個別の変数を用意することなく、直接クリックされた要素を変更します。
ボタンの handleClick 関数を修正して、event.target を使用するようにしましょう。
script.jsファイルを開きます。- ステップ 3 で作成した
handleClick関数を見つけ、eventパラメーターを受け入れ、event.targetを使用するように修正します。
古い handleClick 関数をこの新しいバージョンに置き換えてください。
function handleClick(event) {
// event.target はクリックされたボタンを参照します
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
内訳は以下のとおりです。
handleClick関数は、パラメーターとしてeventオブジェクトを受け取るようになりました。button変数を使用する代わりに、クリックされた要素を参照するためにevent.targetを使用するようになりました。event.target.style.backgroundColor = 'lightblue'は、クリックされた要素の背景色を変更します。event.target.textContent = 'My color changed!'は、そのテキストコンテンツを変更します。
これで、script.js ファイル全体は次のようになります。
const button = document.querySelector("#myButton");
function handleClick(event) {
// event.target はクリックされたボタンを参照します
event.target.style.backgroundColor = "lightblue";
event.target.textContent = "My color changed!";
}
button.addEventListener("click", handleClick);
const link = document.querySelector("#myLink");
function handleLinkClick(event) {
console.log("Link click detected, navigation prevented.");
event.preventDefault();
}
link.addEventListener("click", handleLinkClick);
ファイルを保存し、Web 8080 タブに切り替えます。ボタンをクリックします。背景色が水色に変わり、テキストが「My color changed!」に更新されるのがわかります。
まとめ
JavaScript イベント処理の実験を完了しました。おめでとうございます！ユーザーのアクションに応答することで、Web ページをインタラクティブにするためのコアコンセプトを習得しました。
この実験では、以下の内容を学びました。
- HTML で直接簡単なイベント処理を行うための基本的な
onclick属性。 - 関心の分離と JavaScript コードのクリーンさを保つための、モダンで推奨される
addEventListenerメソッド。 - コードの整理と再利用性を高めるために、名前付き関数をイベントハンドラーとして定義して使用する方法。
- ブラウザのデフォルトの動作を停止するために
event.preventDefault()を使用する、強力なeventオブジェクト。 event.targetプロパティを使用して、イベントをトリガーした要素を特定する方法。
これらのスキルは、フロントエンド Web 開発の基本であり、リッチでダイナミック、そしてユーザーフレンドリーな Web アプリケーションを作成するためのビルディングブロックとなります。これらのコンセプトを練習し続けて、習得してください。
