JavaScriptでは、イベントを処理するためにaddEventListener()を使用します。このメソッドを使うと、ボタンをクリックしたり、キーボードを操作したりしたときに特定の処理を実行することができます。今回は、addEventListener()の基本的な使い方や注意点についてまとめていきたいと思います。
addEventListener()は、指定したイベントが発生したときに、指定した関数（イベントハンドラー）を実行するメソッドです。
// 要素にイベントリスナーを追加
element.addEventListener(eventType, eventHandler, options);- element：イベントを追加するHTML要素
- eventType：イベントの種類（例：
click、keydownなど） - eventHandler：イベントが発生したときに実行する関数
- options（省略可）：オプション設定
以下は、ボタンをクリックするとメッセージを表示する例です。
See the Pen addEventListener by tones (@tonescodedesign) on CodePen.
// ボタン要素を取得
const button = document.getElementById('myButton');
const message = document.getElementById('message');
// ボタンがクリックされたらメッセージを表示
button.addEventListener('click', () => {
message.textContent = 'ボタンがクリックされました！';
console.log('クリックイベントが発生しました。');
});<button id="myButton">クリックしてね</button>
<p id="message"></p>addEventListener()の第三引数には、オプションを設定できます。
once: true– 一度だけイベントを実行capture: true– キャプチャフェーズでイベントを処理passive: true–preventDefault()を無効化
以下は、ボタンが1回クリックされるとイベントが解除される例です。
See the Pen addEventListener by tones (@tonescodedesign) on CodePen.
button.addEventListener('click', () => {
message.textContent = 'このメッセージは1回しか表示されません。';
console.log('クリックイベントが発生しました。');
}, { once: true });イベントリスナーを削除するには、removeEventListener()を使用します。
// イベントを削除
element.removeEventListener(eventType, eventHandler);- eventType：削除するイベントの種類
- eventHandler：削除する関数（
addEventListener()で指定した関数と同じである必要があります）
以下は、ボタンをクリックするとイベントリスナーが削除され、2回目以降は実行されないようにする例です。
removeEventListener()を使用しない場合、イベントリスナーは要素が削除されるまで永続的に残ります。そのため、以下のような問題が発生する可能性があります。
- 動的に生成した要素にイベントを設定した場合、その要素が削除されてもイベントリスナーが残ることがあります。
- これにより不要なイベントが増え、メモリ使用量が増加する可能性があります。
- 例えば、ページ遷移後も不要なイベントが発生し続けると、意図しない動作につながることがあります。
addEventListener()を複数回実行すると、同じイベントハンドラーが何度も呼び出される可能性があります。removeEventListener()を適切に使用することで、不要な処理の実行を防ぐことができます。
イベントハンドラー内でthisを使う場合、関数の定義方法によって挙動が異なります。
button.addEventListener('click', function() {
console.log(this); // クリックされた要素（button）
});button.addEventListener('click', () => {
console.log(this); // グローバルオブジェクト（ブラウザではwindow）
});以下のように無名関数を使ってイベントを追加すると、削除ができなくなります。
button.addEventListener('click', () => {
console.log("クリックされました！");
});
button.removeEventListener('click', () => {
console.log("クリックされました！");
}); // これは削除できない解決策：関数を変数に代入しておく。
// 変数に代入
function handleClick() {
console.log('クリックされました！');
}
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);- キーボード操作を考慮：
clickイベントだけでなく、keydownイベントも設定する - フォーカスの管理：操作対象の要素に
tabindexを指定
以下は、Enterキーでもボタンを押せるようにしています。
button.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
message.textContent = 'Enterキーが押されました！';
}
});element.addEventListener()は、要素に対してイベントを設定する基本的なメソッドです。以下の点に注意して使いましょう。
- イベントの種類を適切に選択する。
removeEventListener()を使うときは、同じ関数を指定する。onceオプションを活用して、イベントを1回だけ実行できる。- アクセシビリティを考慮し、キーボード操作にも対応させる。
