イベントのバッファリングとキャプチャ

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

1.泡



バブルの原理


要素が
  • でイベントが発生した場合、要素に割り当てられたプロセッサは実行を続行し、親要素のプロセッサは実行を続行します.最上位レベルの親エレメントに遭遇するまで、各エレメントに割り当てられたハンドラは実行されません.
  • サンプルコード
    • <form onClick="alert('form')">
  form
  <div onClick="alert('div')">
    div
    <p onClick="alert('p')">p</p>
  </div>
</form>
  • p要素をクリックすると、p上のonClickプロセッサが操作を実行します.
    • onClickプロセッサは、
  • の上にある要素div上で実行されます.
    • onClickプロセッサは
  • 親要素form上で実行されます.
  • は上へ移動し続け、各要素のonClickプロセッサは実行を継続します.
  • はこのように動作するため、p要素をクリックすると、p->div->フォームの順序でalertが表示されます.
  • というストリームをイベントbundlingと呼ぶ.

    • event.target

  • イベントが発生した要素をtarget要素と呼ぶ.
  • tihsは、実行中のプロセッサによって割り当てられる要素である.
  • サンプルコード
    • <form>
  form
  <div>
    div
    <p>p</p>
  </div>
</form>

<script>
  document.querySelector('form').addEventListener('click', function(event) {
    alert(`target => ${event.target.tagName}, this => ${this.tagName}`)
  })
</script>
  • フォームで任意の要素をクリックするとalertが表示されます.
  • alertでは、targetにクリックした要素が表示され、プロセッサが割り当てられた要素フォームが表示されます.

    • 発泡を止める

  • プロセッサでイベントを処理し、親要素への上昇を停止できます.
    • <div onCLick="alert('div')">
  <p onClick="event.stopPropagation()">p</p>
</div>
  • pタグをクリックすると、親要素のonClickハンドルは実行されません.
  • の理由は、イベントオブジェクトのメソッドイベントである.stopProagatioを使用しているからです.

    • stopPropagation vs preventDefault

  • の違いはpreventDefaultが固有の挙動を中断しstopPropagationが発泡化を阻止することである.

    • 2.キャプチャ



    スクリーンショットとは?

  • イベントをサブアイテムとして展開
    キャプチャ・ステップを使用する場合は一般的ではなく、キャプチャに関するコードはほとんど見つかりません.
    • <div>
  div
  <p>p</p>
</div>
<script>
  for(let elem of document.querySelectorAll('*')) {
      elem.addEventListener("click", e => alert(elem.tagName), true);
  }
</script>
  • 上のコードでは、addEventListenerの3番目の要素がtrueである場合、キャプチャを使用できます.
  • p要素をクリックすると、p->div...このように出てくる
  • スクリーンショットは上から下への順番ですdiv->pはこのように出力されます.

    • 🙌 リファレンスサイト

  • コアJavaScript/Bubblingとキャプチャ
  • キャプテンブリッジ/アクティビティBubbling、アクティビティスクリーンショット、アクティビティ委任 .
    • macバックアップベリーパイミラー
    20.11.26