[JS]イベントBubbling、キャプチャ、委任

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

イベントバッファ


サブエレメントにイベントが発生すると、イベントはそのエレメントから親エレメントに渡されます.
Defaultに適用されます.
document.querySelector('li').addEventListener('click', () => console.log('li 클릭'));
document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));
document.querySelector('div').addEventListener('click', () => console.log('div 클릭'));
result : 
li 클릭
ul 클릭
div 클릭

イベントのキャプチャ


サブエレメントにイベントが含まれている場合、イベントが親エレメントからサブエレメントに渡される方法はイベントbublingとは逆です.
<div>
  <ul>
    <li>예시</li>
  </ul>
</div>

<script>
  document
    .querySelector("li")
    .addEventListener("click", () => console.log("li 클릭"));
  document
    .querySelector("ul")
    .addEventListener("click", () => console.log("ul 클릭"), { capture: true });
  document
    .querySelector("div")
    .addEventListener("click", () => console.log("div 클릭"));
</script>
result : 
li 클릭
ul 클릭
div 클릭

委任イベント


委任イベントとは、複数の子がある場合、子にイベントハンドラを別々に設定するのではなく、親にイベントハンドラを設定して子を制御することです.これらのモデルのメリットは次のとおりです.
  • 線分を動的に追加する場合は、ハンドルを考慮する必要はありません.
  • 上位ユニットにイベントハンドラを追加するだけで、コードがより簡潔になるからです.
  • メモリのイベントハンドラが少ないため、パフォーマンスにメリットがあります.
    • 例を見てみましょう.
    <ul onclick="alert(event.type + '!')">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>
    liにはそれぞれハンドルが取り付けられておらず、上位ユニットulのみが取り付けられていることが確認された.必ず活動を任せるわけではないので、状況に応じてよく使いましょう.
    リファレンス
    白準解題-最大公倍数と最小公倍数2609回
    Learn Javascript -6 "Loops"