JavaScript イベント処理の実験へようこそ！イベントとは、ユーザーがボタンをクリックしたり、マウスを移動したり、キーを押したりするなど、ブラウザで発生するアクションのことです。イベント処理とは、これらのイベントに応答するコードを記述するプロセスであり、Web ページをインタラクティブでダイナミックにします。
この実験では、JavaScript でイベントを処理するための基本的な方法を学びます。HTML の基本的な onclick 属性から始め、より強力で柔軟な addEventListener メソッドに進みます。また、event オブジェクトを使用してイベントの動作を制御し、イベントに関する情報を取得する方法も学びます。
この実験を終える頃には、以下のことができるようになります。
始めましょう！
このステップでは、イベントを処理する最も直接的な方法、つまり HTML イベントハンドラー属性の使用方法を学びます。onclick 属性を使用すると、要素がクリックされたときに JavaScript コードの一部を実行できます。この方法はシンプルですが、一般的には HTML と JavaScript を分離する方が良い方法であり、これは次のステップで説明します。
まず、ボタンに onclick 属性を追加しましょう。
index.html ファイルを見つけて開きます。<button> 要素を探します。onclick 属性を含めます。修正後の <button> 要素は以下のようになります。
<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>コードを追加したら、index.html ファイルを保存します。
変更を確認するには、インターフェースの上部にある Web 8080 タブに切り替えます。「Click Me」ボタンをクリックすると、「Button Clicked!」というメッセージが表示されたブラウザのアラートが表示されるはずです。
このステップでは、イベント処理のモダンで推奨されるアプローチである 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'): この行は、ID myButton を使用して DOM からボタン要素を選択します。addEventListener('click', ...): このメソッドはボタン要素で呼び出されます。主に 2 つの引数を取ります。
'click' です。() => { ... } を使用しています。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!」に変更されるのが表示されるはずです。
このステップでは、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);新しいコードを分析しましょう。
myLink を持つ <a> 要素を選択します。handleLinkClick を定義します。この関数は、ブラウザによって提供されるイベントオブジェクトである 1 つのパラメーターを受け取ります。event.preventDefault() を呼び出して、ブラウザがリンクをたどるのを停止します。console.log メッセージも追加します。script.js ファイルを保存します。次に、Web 8080 タブに移動します。
2 つのことに気づくでしょう。ページは labex.io に移動せず、「Link click detected, navigation prevented.」というメッセージがコンソールに表示されます。
この最後のステップでは、event オブジェクトのもう 1 つの重要なプロパティである event.target について学びます。このプロパティは、イベントをトリガーした特定の要素への参照を提供します。これは非常に便利で、特に親要素に 1 つのイベントリスナーがあり、複数の子要素のイベントを管理している場合（イベント委譲と呼ばれるテクニック）に役立ちます。
この実験では、event.target をより単純なコンテキストで使用します。つまり、個別の変数を用意することなく、直接クリックされた要素を変更します。
ボタンの handleClick 関数を修正して、event.target を使用するようにしましょう。
script.js ファイルを開きます。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 ページをインタラクティブにするためのコアコンセプトを習得しました。
この実験では、以下の内容を学びました。
onclick 属性。addEventListener メソッド。event.preventDefault() を使用する、強力な event オブジェクト。event.target プロパティを使用して、イベントをトリガーした要素を特定する方法。これらのスキルは、フロントエンド Web 開発の基本であり、リッチでダイナミック、そしてユーザーフレンドリーな Web アプリケーションを作成するためのビルディングブロックとなります。これらのコンセプトを練習し続けて、習得してください。
