JavaScriptでaddEventListenerを使いこなす！5つのステップ

はじめに
●JavaScriptとaddEventListenerとは
- ○addEventListenerの基本
●addEventListenerの使い方
●注意点と対処法
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptでaddEventListenerを使いこなすことができるようになります。

●JavaScriptとaddEventListenerとは

JavaScriptはウェブページにインタラクティブな機能を追加するために使用されるプログラミング言語です。

addEventListenerは、JavaScriptを使って特定のイベント（クリックやマウスオーバーなど）が発生したときに実行される関数を登録するためのメソッドです。

○addEventListenerの基本

addEventListenerの基本構文は下記のようになります。

element.addEventListener(event, function, useCapture);

ここで、elementはイベントリスナーを追加する要素、eventはイベントの種類、functionはイベント発生時に実行される関数、useCaptureはイベント伝播のフェーズを指定するオプションです。

●addEventListenerの使い方

ここからは、addEventListenerを使ったイベントの実装例を紹介します。

○サンプルコード1：ボタンクリックイベントの実装

ボタンをクリックしたときにアラートを表示するコードを紹介します。

この例では、ボタン要素を取得し、クリックイベントに対応する関数を登録しています。

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  alert('ボタンがクリックされました！');
});

○サンプルコード2：マウスオーバーイベントの実装

要素にマウスオーバーしたときに背景色を変更するコードを紹介します。

この例では、対象要素にマウスオーバーイベントとマウスアウトイベントの関数を登録しています。

const box = document.getElementById('myBox');
box.addEventListener('mouseover', () => {
  box.style.backgroundColor = 'red';
});
box.addEventListener('mouseout', () => {
  box.style.backgroundColor = '';
});

○サンプルコード3：フォーム送信イベントの実装

このコードでは、フォームの送信イベントを使って、送信時に入力内容のバリデーションを行います。

この例では、テキストボックスの入力内容が空の場合、送信をキャンセルし、エラーメッセージを表示しています。

const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
  const inputText = document.getElementById('inputText');
  if (inputText.value.trim() === '') {
    e.preventDefault();
    alert('入力内容が空です。入力してください。');
  }
});

○サンプルコード4：キーボードイベントの実装

このコードでは、キーボードイベントを使って、特定のキーが押されたときに実行される処理を実装しています。

この例では、エンターキーが押されたときにメッセージを表示しています。

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('エンターキーが押されました。');
  }
});

○サンプルコード5：ウィンドウリサイズイベントの実装

このコードでは、ウィンドウのリサイズイベントを使って、ウィンドウサイズが変更されたときに実行される処理を実装しています。

この例では、ウィンドウサイズが変更されたときに、現在のウィンドウサイズを表示しています。

window.addEventListener('resize', () => {
  console.log(`ウィンドウサイズが変更されました： ${window.innerWidth} x ${window.innerHeight}`);
});

●注意点と対処法

メモリリークの防止：イベントリスナーを適切に解除することで、メモリリークを防ぎます。
removeEventListenerメソッドを使用してイベントリスナーを解除できます。
イベント伝播の制御：イベント伝播を停止することで、親要素や子要素へのイベントの影響を防ぎます。
event.stopPropagation()やevent.stopImmediatePropagation()を使用してイベント伝播を制御できます。