イベントバブリング:HTML 文書におけるイベントの伝播原則と活用方法

イベントバブリング(Event Bubbling)は、HTML 文書の構造でイベントが発生した場合、そのイベントが親要素に連続して伝播する現象を指します。これにより、イベントの処理がより直感的に行えるようになります。

コード例

例えば、以下のようなHTML構造を考えてみましょう。

ボタン(#child)をクリックした場合、クリックイベントはボタンから始まり、親要素にあたるdiv#parentまで連続して伝播します。つまり、クリックイベントは最初にボタンで処理され、その後に親要素であるdiv#parentでも処理されます。このように、イベントは下位要素から上位要素へと伝播することをイベントバブリングと呼びます。

イベントバブリングはイベントハンドラをより効率的に使用できるようにします。例えば、複数の下位要素が同じイベントを処理する必要がある場合、親要素に1つのイベントハンドラを登録し、イベントがバブリングされるにつれて必要な下位要素でイベントを処理できます。

イベントバブリングはイベントをより柔軟に扱えるようにしますが、時折意図しない動作を引き起こすことがあります。これを避けたい場合は、event.stopPropagation()メソッドを使用してイベントバブリングを停止できます。

event bubbling

<div id="parent">
    <button id="child">Click me!</button>
</div>