[コンピュータサイエンス]イベントのバッファリングとキャプチャ

5192 ワード
computer science テキストリンク

イベントバッファ


泡化の原理は簡単です.
エレメントにイベントが発生すると、エレメントに割り当てられたハンドラが操作され、親エレメントのハンドラが操作されます.このプロシージャは、最上位レベルの親要素に遭遇する前に繰り返し、各要素に割り当てられたハンドルによって操作されます.
例を見てみましょう.(3つの要素がFORM>DIV>Pで重なる)
<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>
一番奥の<p>をクリックすると、次のようになります.
1.<p>に割り当てられたonclickHandlerによって動作する.
2.外部に割り当てられた<div>のオペレータ操作.
3.外の|𐥊함함함함함함함함함함함5463
4.<form>各要素に割り当てられたdocumentHandlerは、オブジェクトに遭遇するまで動作します.
このような操作により、onclick要素をクリックすると、<p>->>p->divの順に3つのalertウィンドウが表示されます.
この流れをイベントバブルと呼ぶ.
📌 ほとんどの活動はバブルです.formeventでも泡が立たないイベントがありました.

発泡を止める


イベントbundlingはfocusを使用して中止できます.
次の例のevent.stopPropagation()<buttn>をクリックしても機能しません.
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>
📌 event.stopImmediatePropagation()
1つの要素の特定のイベントを処理するプロセッサが複数ある場合、1つのプロセッサがbundlingを停止しても、残りのプロセッサは実行を続行します.body.onclickアップシュートは防げますが、他のハンドルの動きは防げません.
発泡を停止し、要素に割り当てられた他のハンドルの動作を阻止するには、event.stopPropagation()を使用する必要があります.この方法では、要素に割り当てられた特定のイベントを処理するすべてのプロセッサが機能しません.
必要がない限り、泡化を阻止しないでください.
泡化を止めなければならない明らかな状況でなければ、泡化を阻止しないでください.アーキテクチャをよりよく考慮するには、本当に阻止する必要がある場合に限られます.

イベントのキャプチャ


イベントキャプチャというプロセスは、実際のコードではあまり使用されませんが、よく役立ちます.
標準DOMイベントで定義されたイベントフローには、3つのフェーズがあります.
  • 取得フェーズ-イベントをサブエレメントに伝播
  • ターゲットステップ-実際のターゲット要素にイベントを転送するステップ
  • Bubblingフェーズ-親要素にイベントが伝播するフェーズ
    • Node.js Redis外部接続
    MariaDB Replicationの構成