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

JavaScriptのaddEventListenerを活用したイベント処理のサンプルコードJS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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}`);
});

●注意点と対処法

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

●カスタマイズ方法

  1. カスタムイベントの作成: CustomEventコンストラクタを使用して、独自のイベントを作成できます。
  2. イベントデータの受け渡し: detailプロパティを使用して、カスタムイベントにデータを渡すことができます。

まとめ

この記事では、JavaScriptのaddEventListenerを使って、イベントリスナーの作成とイベント処理について詳しく解説しました。

サンプルコードを通じて、クリックイベント、マウスオーバーイベント、フォーム送信イベント、キーボードイベント、ウィンドウリサイズイベントの実装方法を学びました。

また、注意点としてメモリリークの防止やイベント伝播の制御が挙げられました。

最後に、カスタマイズ方法としてカスタムイベントの作成やイベントデータの受け渡しを紹介しました。

この記事を読んで、JavaScriptのaddEventListenerを使ったイベント処理の実装ができるようになりました。

さらに応用して、独自のイベントやイベントデータを使ったカスタマイズも可能です。

これらの知識を活用して、よりインタラクティブなウェブページを作成しましょう。