このページの本文へ

ちゃんと知ってる?JavaScriptのイベントバブリングを学ぼう

2017年07月05日 20時41分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

イベントが発生したとき、親やさらに先の要素にも同じイベントが発生する「イベントバブリング」。バグをなくし、思い通りに制御できるようになるために、しっかり理解しましょう。

JavaScriptを使っている人なら、「イベントバブリング」を聞いたことがあると思います。ある要素が別の要素にネストされて、両方の要素がクリックなど同じ「イベント」のリスナーを登録しているときにイベントハンドラーが呼ばれる順番のコンセプトです。

イベントバブリングはパズルの1片にすぎず「イベントキャプチャリング」「イベント伝搬(プロパゲーション)」と一緒に話題になります。JavaScriptでイベントを扱うには、この3つを理解しなければなりません。たとえば、the event delegation patternを身に付けたいときです。

この記事では、用語を説明し、それらがどう関連するかを解説します。JavaScriptのイベントフローの基本を理解すれば、アプリケーションをきめ細かく制御できるようになります。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング