dom事件の流れに関する二、三のこと

イベントをdomに結合する3つの方法

行の内部結合

js内バインディング

btnDom.onclick = function clickHandler() {
    console.log('click');
}

イベントモニターバインド

btnDom.addEventListener('click', e => {
    console.log('click');
})

DOMイベントフロー

DOMイベントの流れは何ですか?

DOM構造は、一つのDOM要素がイベントを生成すると、イベントは現在のノードとルートノードの間の経路を伝播し、全てのノードがこのイベントを受信するツリー構造である.これはDOMイベントフローである.

DOMイベントフローの3段階

キャプチャフェーズ(capture):ducoumentからターゲットノード

へ流れる.

目標段階:

に到達する.

発泡段階:目標段階からdocumentノード

に発泡する.
この3つの段階の流れについては、ドキュメント上に画像があり、詳しく説明しています.

イベントの実行順序

タージにとっては、イベント実行は、常に目標段階にある.しかし、イベントフロー全体の他の要素にとっては、実行順序はまた別の要素によって影響される.
まず、dom構造を以下のように説明します.

为其绑定事件

fa.addEventListener('click', e => {
  console.log('click fa')
})

ch.addEventListener('click', e => {
  console.log('click ch')
})

ここでchをクリックして、印刷した結果は

"click ch"
"click fa"

先にchのイベントを実行してからfaのイベントを実行しましたので、faのイベントはバブル段階で実行されていることが分かります.
addEventListener方法は、第3のパラメータ、useCapture、bootleanに入ることができ、この実行段階を決定します.デフォルトはfalse、つまり発泡段階で、trueに設定すると捕獲段階になります.

fa.addEventListener('click', e => {
  console.log('click fa')
}, true)

ch.addEventListener('click', e => {
  console.log('click ch')
}, true)

実行結果は

"click fa"
"click ch"

stopPropagation

イベントフローのいずれかのイベントでは、イベントフローを停止するために、イベントフローのstopPropagation方法を呼び出すことができます.上記のシーンを例にとると、キャプチャ段階でfaのイベントが実行され、stopPropagationが実行されれば、イベントフローは終了し、目標フェーズには到達せず、chの世界は実行されない.

fa.addEventListener('click', e => {
  console.log('click fa')
  e.stopPropagation();
}, true)

ch.addEventListener('click', e => {
  console.log('click ch')
}, true)

実行結果は

"click fa"

オンラインデモ

demo

参照

事件の流れ