Webサイトでは、アクセスした「ページの読み込み」、「ボタンのクリック」、「フォームへの入力」、「マウスポインタを要素の上に乗せる」など、様々な出来事やユーザー操作が発生します。
こういったWeb上で発生するすべての出来事、ユーザー操作を、JavaScriptでは「イベント」と呼びます。
本記事で扱うイベント
JavaScriptのイベントは数百もの種類があります。
本記事では、中でも最も使われるイベントの王様「クリック」をピックアップし、使い方を説明していきます。
種類は数百あれど、考え方や使い方の基本はどれも同じなので、まずは最も使われるイベントを使いこなせるようにしましょう。
クリックイベントの基本
JavaScriptでイベントを制御するには、クリックに限らずイベントリスナー（EventListener）を設定する必要があります。
「イベントのリスナー」なので、指定イベントの発生を今か今かと聞き耳を立てて待っている機能をイメージすると分かりやすいかと思います。
イベントリスナーを追加する書式は次の通りです。
element.addEventListener(“イベント名”, 関数)
DOM要素からaddEventListenerメソッドを呼び出すのですが、引数を2つ渡しています。
- 第一引数：イベントの種類を表す文字列
- 第二引数：イベントが発生したら動作する関数
ではまず、簡単なサンプルプログラムを作成して、理解を深めていきましょう。
「あいさつ」というボタンをクリックすると、「Hello！」とアラートがポップアップする。
<!-- ここより上は省略 -->
<body>
<button>あいさつ</button>
<script>
document.querySelector("button").addEventListener( "click", function() {
alert("Hello!");
} );
</script>
</body>
</html>イベントオブジェクトの利用
クリックイベントが発生すると、イベントオブジェクトが生成されます。
このオブジェクトには、クリックされた要素やクリック位置などの情報が含まれています。
先ほど作成したプログラムを使用して、クリックされた要素とクリック位置をコンソールに表示するプログラムに改造してみましょう。
<!-- ここより上は省略 -->
<body>
<button>あいさつ</button>
<script>
document.querySelector("button").addEventListener( "click", function(event) {
console.log("クリックされた要素:", event.target);
console.log("クリック位置: x =", event.clientX, "y =", event.clientY);
} );
</script>
</body>
</html>ブラウザを開き、「あいさつ」ボタンをクリックすると、デベロッパーツールのコンソールには次のような表示がされているはずです。
> クリックされた要素:
<button>あいさつ</button>
> クリック位置: x = 55 y = 25複数の要素にイベントを追加する
複数の要素に同じ処理を追加したいこともあるでしょう。
その場合は、ループを使ってイベントリスナーを追加していきます。
クリックされたボタンのキャプションがコンソールに表示されるプログラム例です。
<!-- ここより上は省略 -->
<body>
<button>Good Morning</button>
<button>Good Afternoon</button>
<button>Good Evening</button>
<script>
let buttons = document.querySelectorAll("button");
buttons.forEach( function(button) {
button.addEventListener( "click", function(event) {
console.log(button.textContent);
} );
} );
</script>
</body>
</html>forEachでのループとイベントリスナーの処理の両方で、関数そのものが引数になっているため、少々難易度の高いプログラムになっています。
実際にプログラムを作成して、動作させてみてください。
イベントデリゲーション
イベントデリゲーションを使うことで、親要素に対して一度だけイベントリスナーを設定し、子要素に対するイベントを効率的に管理できます。
親要素の「ul」にイベントリスナーを設定し、それぞれの子要素「li」がクリックされた際にclass名で分岐させ、異なるメッセージを表示するプログラム例です。
<!-- ここより上は省略 -->
<body>
<ul>
<li class="list1">Good Morning</li>
<li class="list2">Good Afternoon</li>
<li class="list3">Good Evening</li>
</ul>
<script>
let ul= document.querySelector("ul");
ul.addEventListener( "click", function(event) {
if (event.target.className == "list1") {
console.log("おはよう");
} else if (event.target.className == "list2") {
console.log("こんにちは");
} else {
console.log("こんばんは");
}
} );
</script>
</body>
</html>まとめ
JavaScriptのクリックイベントは、ユーザーとのインタラクションを実現するための基本的な手段です。
基本的な使い方から応用的なテクニックまでを理解することで、より豊かなユーザーエクスペリエンスを提供することができます。
本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。
それでは、最後までお読みいただきありがとうございます。
コメント