[JavaScript] Event Bubbling & Capturing

3127 ワード
JavaScript テキストリンク

Event bubbling


エンティティにイベントが発生すると、エンティティのイベントハンドラが実行され、親エンティティのイベントハンドラ、さらにはルートエンティティのイベントハンドラが実行されます.
例)
<form onclick="alert('form')">
  FORM
  <div onclick="alert('div')">
    DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

// P 를 클릭하면 <p>, <div>, <form> 의 이벤트 핸들러가 차례대로 실행된다.
泡立ちが大きくなるように、内部の装飾から始まり、親の装飾として活動します.

event.target


イベントを引き起こす要素をtarget element,eventと呼ぶ.targetでアクセスできます.

Stopping bubbling


アクティブbublingはtarget ellementから-><html>、documentオブジェクト、さらにはwindowオブジェクトを呼び出し、沿道のすべてのプロセッサを呼び出します.event.stopPropagation()を使用して発泡を停止した.event.stopImmediatePropagation()エリモントのすべてのハンドルの泡を止めたいとき.
<body onclick="alert(`the bubbling doesn't reach here`)">
  <button onclick="event.stopPropagation()">Click me</button>
</body>

// 버튼을 눌러도 이벤트가 발생하지 않는다.
通常、泡を止める理由はほとんどありません.

Event capturing


Capturingはあまり使われません
DOM活動伝播には3段階がある.
  • Capturing phase – the event goes down to the element.
  • Target phase – the event reached the target element.
  • Bubbling phase – the event bubbles up from the element.

    • 画像:https://www.w3.org/TR/DOM-Level-3-Events/
    イベントが発生した場合は、先祖エリモンからターゲットエリモンに向かい、イベントが発生した後にHandlerを呼び出す.スナップフェーズは表示されません.
    BOJ|15650 NとM(2)
    7月13日(小児高)