もくじ
Webサイトやアプリケーションの開発において、ユーザーの操作に反応する「クリックイベント」は欠かせない存在です。
ボタンを押したときにアラートを表示したり、メニューを開閉したりと、クリックイベントはさまざまな場面で活用されています。
本記事では、JavaScriptでクリックイベントを設定する基本的な方法から、実践的な使い方、複数イベントの管理や動的な要素への対応まで、初心者にもわかりやすく解説します。
これからJavaScriptを学ぶ方や、クリックイベントの仕組みをしっかり理解したい方はぜひ参考にしてください。
クリックイベントとは？
クリックイベントは、ユーザーがマウスボタンをクリックした際に発生するイベントです。
HTML要素に対してクリックイベントを登録することで、ユーザーの操作に応じた動的な動作を実現できます。
基本的なクリックイベントの設定方法
基本的なクリックイベントの設定方法を3つ紹介します。
使用頻度は3つ目に解説しているaddEventListenerメソッドを使用することが多いです。
1. HTMLのonclick属性を使う方法
同じ要素に対して新たにonclickプロパティが設定された場合、onclick属性のイベントハンドラは上書きされます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button onclick="alert('ボタンがクリックされました！')">クリック</button></body></html>2. イベントハンドラプロパティのonclickで登録する方法
同じ要素に対して新たにonclick属性が設定された場合、既存のonclickイベントハンドラは上書きされます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton">クリック</button> <script> document.getElementById('myButton').onclick = function() { alert('ボタンがクリックされました！'); }; </script></body></html>3. addEventListenerメソッドを使う方法
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton">クリック</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('ボタンがクリックされました！'); }); </script></body></html>addEventListenerメソッドを使うメリット
複数のクリックイベントを追加できる
addEventListenerを使用すると、同じ要素に複数のクリックイベントを追加できます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton">クリック</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('クリックイベント1'); }); document.getElementById('myButton').addEventListener('click', function() { alert('クリックイベント2'); }); </script></body></html>インラインイベントハンドラの上書きを避けることができる
addEventListenerを使用すると、既存のインラインクリックイベントが上書きされることを避けることができます。
これにより、他のスクリプトやライブラリと干渉せずにイベントを追加できます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton" onclick="alert('インラインクリックイベント')">クリック</button> <script> document.getElementById('myButton').addEventListener('click', function() { alert('追加のクリックイベント'); }); </script></body></html>クリックイベントを動的に削除することができる
addEventListenerを使用すると、クリックイベントを削除するためのremoveEventListenerメソッドを使用できます。
これにより、特定の条件下でクリックイベントを動的に削除できます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton">クリック</button> <script> const button = document.getElementById('myButton'); function handleClick() { alert('ボタンがクリックされました！'); } button.addEventListener('click', handleClick); // 条件に応じてクリックイベントを削除 // ここでは例として、すぐにクリックイベントを削除しています button.removeEventListener('click', handleClick); </script></body></html>動的に生成された要素に対してクリックイベントを登録できる
動的に生成された要素にイベントハンドラプロパティのonclickでクリックイベントを登録する場合、要素生成後にクリックイベントを登録する必要があります。
addEventListenerを使用することで、後から動的に生成された要素に対してクリックイベントを登録することができます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <script> document.addEventListener('click', function(event) { if (event.target.matches('#myButton')) { alert('ボタンがクリックされました！'); } }); // 新しいボタン要素を作成 let button = document.createElement('button'); // ボタンに id 属性とテキストを設定 button.id = 'myButton'; button.textContent = 'クリック'; // ボタンを body の先頭に追加 document.body.insertBefore(button, document.body.firstChild); </script></body></html>モダンなイベントハンドリング
addEventListenerは、HTML5以降の標準的なイベントハンドリング方法であり、多くのモダンブラウザでサポートされています。
これにより、より一貫性のあるコードを書きやすくなります。
同じクラスを持つ要素にクリックイベントを登録する方法
JavaScriptのquerySelectorAllメソッドで要素を取得し、forEachループを使って各要素にクリックイベントを追加することができます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button class="clickable">クリック 1</button> <button class="clickable">クリック 2</button> <button class="clickable">クリック 3</button> <script> // .clickableクラスを持つ全ての要素を取得 const elements = document.querySelectorAll('.clickable'); // 各要素にクリックイベントを追加 elements.forEach(function(element) { element.addEventListener('click', function() { alert(`${element.textContent} がクリックされました！`); }); }); </script></body></html>既存のクリックイベントを削除して新しいクリックイベントを登録する方法
JavaScriptのremoveEventListenerメソッドでクリックイベントを削除後、addEventListenerで新しいクリックイベントを登録することができます。
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【JavaScript】クリックイベント</title></head><body> <button id="myButton">クリック</button> <script> const button = document.getElementById('myButton'); function handleClick() { alert('既存のクリックイベント'); } // クリックイベントを追加 button.addEventListener('click', handleClick); // 既存のクリックイベントを削除 button.removeEventListener('click', handleClick); function handleClick2() { alert('新しいクリックイベント'); } // 新しいクリックイベントを設定 button.addEventListener('click', handleClick2); </script></body></html>