JavaScriptでaddEventListenerを書く｜実例付

※本サイトにはプロモーション・広告が含まれています。

（最終更新月：2023年11月）

✔以下のような方に向けて書かれています

「JavascriptのaddEventListenerって何をするものなのか？」

「addEventListenerの実装方法について詳しく知りたい」

「addEventListenerを使ったサンプルコードが見たい」

✔当記事で解説する内容

  • JavaScript addEventListenerの基本知識
  • addEventListenerの実装方法と応用例
  • addEventListenerを用いた具体的なコード例

JavaScriptのイベントハンドリングにおいて欠かせないaddEventListenerの基本から、活用法、そしてその効果的な実装例まで、具体的に詳しく解説していきます。

ぜひ、記事の最後までご覧いただき、addEventListenerの理解を深めてください。

筆者プロフィール

筆者プロフィールアイコン

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

  • 見るからにきれいなコードの書き方
  • コードの分割方法
  • 変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック
created by Rinker

JavaScriptとaddEventListenerの導入

こちらでは、「JavaScriptとaddEventListenerの導入」についてお伝えしていきます。

JavaScriptとそのメソッドの理解は、ウェブ開発の基本的なスキルを向上させるために非常に役立つでしょう。

  • JavaScriptとは？
  • addEventListenerの重要性

JavaScriptとは？

JavaScriptは、ウェブページを動的にするためのプログラミング言語です。

HTMLとCSSによる静的なページを、ユーザーとのインタラクションを取り入れた動的ページへと変化させます。

例えば、以下のコードはページ上のボタンがクリックされた時にアラートを表示するものです。

document.querySelector("button").onclick = function() {
    alert("クリックされました！");
};

addEventListenerの重要性

addEventListenerはJavaScriptにおけるイベントハンドリングのためのメソッドです。

このメソッドを使用することで、特定のイベント（クリックやキー入力など）が発生したときに関数を実行することができます。

addEventListenerの基本理解

こちらでは、「addEventListenerの基本的な理解」について深めていきます。

これを理解することで、さまざまなユーザー操作に応じた動作を実現できるようになるでしょう。

  • 基本的な構文と使い方
  • addEventListenerの引数と返り値

基本的な構文と使い方

addEventListenerメソッドを使用する際の基本的な構文は以下のようになります。

element.addEventListener(event, function);
  • element：イベントを追加したいHTML要素
  • event：イベントの名前
  • function：イベント発生時に実行される関数

addEventListenerの引数と返り値

addEventListenerは、主に3つの引数を受け取れます。

  • 「イベント名」
  • 「実行する関数」
  • 「イベント伝播の方式」

返り値としては、とくに何も返しません。

addEventListenerの組み込みイベント群

こちらでは、「addEventListenerの組み込みイベント群」について詳しく見ていきましょう。

これらのイベントを知ることで、ユーザーの様々な操作に柔軟に対応できるようになります。

  • 一般的なイベントの一覧と説明
  • よく使われるイベント例’click’
  • 複雑なイベント例’change’,’keydown / keyup’, ‘DOMContentLoaded’

一般的なイベントの一覧と説明

JavaScriptでのイベントは多岐にわたります。

以下はよく使われるイベントの一部です。

  • click: 要素がクリックされた時
  • mouseover: マウスカーソルが要素の上に移動した時
  • mouseout: マウスカーソルが要素から離れた時
  • keydown: キーボードのキーが押された時
  • change: 入力要素の内容が変更された時

よく使われるイベント例’click’

‘click’イベントは最も一般的に使用されるイベントのひとつ。

例として、ボタンをクリックした際にメッセージを表示するコードは以下のようになります。

document.querySelector('button').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

複雑なイベント例’change’,’keydown / keyup’, ‘DOMContentLoaded’

複雑なイベントには以下のようなものがあります。

  • change: 入力要素の値が変更されたときに発生。主にテキストボックスや選択ボックスで使用されます。
  • keydown / keyup: キーボードのキーが押されると’keydown’が、放されると’keyup’が発生。
  • DOMContentLoaded: ページのHTMLが完全に読み込まれ、解析された時に発生。スクリプトを実行する際の起点としてよく使われます。

イベントリスナーの実践的な使い方

こちらでは、「イベントリスナーの実践的な使い方」に焦点を当てて、具体的なコード例を交えながら説明していきます。

  • 簡単なリスナーの追加
  • 中断可能リスナー、無名関数、アロー関数の使用例
  • optionsの適用例と複数オプションのイベントリスナー

簡単なリスナーの追加

簡単なリスナーを追加する例を見ていきましょう。

  • HTMLのコード
  • JavaScriptのコード
  • 実行結果

HTMLのコード

<button id="sampleBtn">クリックしてください</button>

JavaScriptのコード

document.getElementById('sampleBtn').addEventListener('click', function() {
    alert('ボタンがクリックされました！');
});

実行結果

上記のHTMLとJavaScriptのコードを使用すると、ボタンをクリックした際にアラートメッセージが表示されます。

中断可能リスナー、無名関数、アロー関数の使用例

イベントリスナーでは、複数の方法で関数を定義できます。

中断可能なリスナーやアロー関数を使用して、よりシンプルかつ効率的なコードを書く方法を学びましょう。

  • 基本的なイベントリスナーの設定
  • アロー関数を使用する
  • イベントリスナーの中断（event.preventDefault()を使用）
  • イベントリスナー内での条件付き中断

基本的なイベントリスナーの設定

document.getElementById('myButton').addEventListener('click', function() {
    console.log('Button clicked!');
});

アロー関数を使用する

document.getElementById('myButton').addEventListener('click', () => {
    console.log('Button clicked!');
});

イベントリスナーの中断（event.preventDefault()を使用）

document.getElementById('myForm').addEventListener('submit', (event) => {
    event.preventDefault();  // デフォルトのフォーム送信を防止
    console.log('Form submission stopped.');
});

イベントリスナー内での条件付き中断

document.getElementById('myLink').addEventListener('click', (event) => {
   if (!confirm('このリンクを開きますか？')) {
       event.preventDefault();  // ユーザーがキャンセルした場合、リンクのフォローを防止
   }
});

optionsの適用例と複数オプションのイベントリスナー

addEventListenerの第三引数としてoptionsオブジェクトを渡すことで、イベントリスナーの挙動をカスタマイズできます。

これにより、例えばイベントの伝播を制御することなどが可能です。

以下に具体的な例を示します。

  • capture オプションを使用してイベントのキャプチャフェーズを制御する
  • once オプションを使用してイベントリスナーを一度だけ実行する
  • passive オプションを使用してパフォーマンスを向上させる

capture オプションを使用してイベントのキャプチャフェーズを制御する

   document.getElementById('parentElement').addEventListener('click', () => {
       console.log('Parent clicked!');
   }, { capture: true }); // イベントキャプチャフェーズでリスナーが呼ばれる

   document.getElementById('childElement').addEventListener('click', () => {
       console.log('Child clicked!');
   }, { capture: false }); // イベントバブリングフェーズでリスナーが呼ばれる

once オプションを使用してイベントリスナーを一度だけ実行する

   document.getElementById('myButton').addEventListener('click', () => {
       console.log('Button clicked once!');
   }, { once: true }); // ボタンがクリックされた後、リスナーは自動的に削除される

passive オプションを使用してパフォーマンスを向上させる

   document.addEventListener('scroll', () => {
       console.log('Scrolling...');
   }, { passive: true }); // `preventDefault()` を呼び出さないということをブラウザに伝え、スクロールパフォーマンスを向上させる

注意点とよくあるトラブルの対処法

こちらでは、「イベントリスナーの使用時の注意点やよくあるトラブル」について説明します。

  • イベントリスナーのコールバック注意点
  • オプションの対応の安全な検出
  • イベント処理の上書きについて

イベントリスナーのコールバック注意点

イベントリスナーのコールバック関数内では、thisキーワードが期待通りのオブジェクトを参照しない場合があります。

アロー関数を使用すると、この問題を回避できます。

オプションの対応の安全な検出

特定のオプションがブラウザでサポートされているかどうかを検出することは、予期しない動作を防ぐために重要です。

addEventListenerの第三引数にoptionsを渡す前に、対応しているかを確認しましょう。

let isPassiveSupported = false;
try {
    let options = Object.defineProperty({}, 'passive', {
        get: function() {
            isPassiveSupported = true;
        }
    });
    window.addEventListener('testPassive', null, options);
    window.removeEventListener('testPassive', null, options);
} catch (err) {}

if (isPassiveSupported) {
    // passiveオプションをサポートしている時の処理
}

イベント処理の上書きについて

複数のイベントリスナーが同じ要素に追加された場合、それらは追加された順番に呼び出されます。

しかし、後から追加されたリスナーでイベントの伝播を止めると、前のリスナーの処理が上書きされる可能性があります。

このような問題を避けるためには、イベントの伝播を制御するメソッドやオプションの使用に注意が必要です。

removeEventListenerの導入

こちらでは、イベントリスナーを削除するremoveEventListenerメソッドの使用方法を詳しく説明します。

  • 削除操作の必要性と基本的な使い方
  • サンプルコード

削除操作の必要性と基本的な使い方

イベントリスナーは必要ない場合やページ遷移時などに削除することも大切。

なぜならメモリの無駄遣いを防ぎ、パフォーマンスの向上が期待できるからです。

removeEventListenerは、その名の通り、要素からイベントリスナーを削除するためのメソッドになります。

サンプルコード

以下は、removeEventListenerの基本的な使用例です。

let handleClick = function() {
    alert('ボタンがクリックされました！');
};

// イベントリスナーの追加
document.getElementById('sampleBtn').addEventListener('click', handleClick);

// イベントリスナーの削除
document.getElementById('sampleBtn').removeEventListener('click', handleClick);

まとめ

当記事では、JavascriptのaddEventListenerについて学習してきました。

日々の開発で、addEventListenerを適切に使用することで、ユーザーとのインタラクションの向上が期待できます

正確な知識と実践を通じて、より良いウェブ体験を提供しましょう。

ぜひ当記事のコードを参考に、手を動かして学んでください。

タイトルとURLをコピーしました