💻 TIL 16|イベントバッファとイベント委任

この章では、イベントBubblingとイベント委任について説明します.0~
⚠▼▼▼▼▼▼▼▼▼▼コメントで教えてください

📃 今日習ったこと

<div onclick="alert('div에 할당한 핸들러!')">
  <em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>

上記の例に示すように、<em>をクリックしても、<div>に割り当てられたオペレータ操作が行われる.この理由は何ですか.イベントだから

イベントバッファ

エレメントにイベントが発生すると、エレメントに割り当てられたハンドラが操作され、親エレメントのハンドラが操作されます.このプロシージャは、最上位レベルの親要素に遭遇する前に繰り返し、各要素に割り当てられたハンドルによって操作されます.

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

上記の例で起こったことを順番に理解しましょう.
1.まず、<p>によって割り当てられたonclickによって動作する.
2.次いで、<div>によって割り当てられたonclickによって動作する.
3.次に<form>に割り当てられたonclickである.
4.各要素に割り当てられたonclickプロセッサは、最後にドキュメントオブジェクトに遭遇するまで実行されます.
この流れをイベントバブルと呼ぶ.

event.target

親要素のハンドルは、イベントが正確にどこで発生するかなどの詳細を取得します.イベントが発生した一番奥の要素はtarget要素と呼ばれ、event.targetを使用してアクセスできます.

委任イベント

キャプチャとbundlingを使用すると、強力なイベント処理モード:イベント委任(event delegation)を実現できます.複数の要素を同様に処理する必要がある場合は、イベント委任が使用されます.イベント委任を使用すると、各要素にプロセッサを割り当てることなく、1つのイベントハンドラを要素の共通の祖先に割り当てることができます.
共通の祖先に割り当てられたHandlerでは,event.targetを用いて実際にどこでイベントが発生したかを知ることができる.
次のアルゴリズムを使用して操作します.
1.コンテナにハンドルを割り当てます.
2.Handlerのevent.targetを使用して、イベントが発生した原因を特定します.
3.必要な要素でイベントが発生したと判断された場合、イベントは処理されます.

🔥 今日の気持ち

昨日宿題を出して、今日面接勉強をしました.なにしろ、時間がないので準備が不十分です.知っているくせに、言い出すのは本当に難しい.😂 面接でどうすればいいか、少し知っています.次の面接から上達してほしい.
また、授業は15日間行われ、初めて延期された.🤯 あと3つだけ闻き终わってから寝たいけど...間違いが私の足を引っ張った.授業は20分なのに、どうして私が1時間以上かかるのか、理解しながら実習について行くのは大変です.すなわち,分離素子,楽観更新(これは明日授業を終えて整理した内容)を考慮し,符号化を行うべきである.とても面白くて、フロントエンド開発者のキャラクターを覗いているような感じもして、ほほほ.
授業中、イベント委任(event delegation)を使ってコードを書きました.これは私が昨日課題で使った内容です.実は書く理由が分からず、その部分を解決できて嬉しいです.
昨日討論講座が行われたので、いろいろな面からヒントを得て刺激を受けました.実は去年Purchした時nuxtjsを使用したことがありますが、なぜssgを使用するのか分かりません.使ってから特別講座を聞いたときはもっと面白かったですが、昔の私は本当に何も知りませんでした.😂
周末に勉强して、早く积み重ねた授业を闻きましょう.

🗣 今日のTMI

野球開幕後はSSGが野球6連勝.^^おお~なんと1位!こんな日があるんだよ!新しい皮

Refer

プログラマ
発泡と捕獲
委任イベント

今日の内容を整理する

DefcosDay 15