イベントバッファリングとキャプチャ、委任(1)

8743 ワード
JavaScript Event テキストリンク

1.イベントとは？


イベント(Event)とは、Webブラウザから通知されたHTML要素で発生するイベントのこと.
Webページで使用されるJavaScriptは、これらのイベントに応答して特定の操作を実行できます.したがって,クライアントJavaScriptは非同期イベント中心(イベント駆動)のプログラミングモデルと呼ばれる.
💁 ソース
🤔 まだ何も感じないなら、よく使うDOMイベントを見てみましょう…!
  • click
  • keydown,keyup
  • submit .. など
    • これらは一度使ったことがあるはずです.

    イベントハンドラ


    イベントに反応するには、イベント発生時に実行される関数Handlerという関数を割り当てる必要があります.
    Handlerはjavascriptコードでユーザの動作にどのように応答するかを表した.
    function sayThanks() {
  alert('감사합니다!');
}

elem.onclick = sayThanks;
    💁 ここには少し注意が必要です.
    // 올바른 방법
button.onclick = sayThanks;

// 틀린 방법
button.onclick = sayThanks();
    このとき関数はsayThanksのように割り当てるべきである.sayThanks()を割り当てると仕事がなくなります.
    私も過ちを犯したことがある.しかし、なぜだめなのか考えたことがありません.🥲
    どうしてだめなの?🤔
    sayThanks()のように括弧を付けることは、関数を呼び出すことを意味します.なぜなら、上記の例の最後の行のようにsayThanks()をpropertyに割り当てると、関数呼び出しの結アップル(result)値が割り当てられるからです.

    イベントオブジェクト


    イベントが発生すると、ブラウザはイベントオブジェクト(event object)を作成します.ここで活動に関する詳細情報を加え、買収の形でHandlerに伝えます.
    イベント・オブジェクトがサポートする一部のProperty...
  • event.type
    イベントタイプは、上記の例では「click」です.
  • event.currentTarget
    イベントを処理する要素.矢印関数を使用して他の場所に作成またはバインドされていない場合は、thisが示す値に等しくなります.矢印関数を使用する場合、または関数を他の場所にバインドする場合はeventです.currentTargetを使用して、イベント処理の要素情報
    • を取得することができる.

    2.泡


    まず例から表示
    次のハンドルは<div>に割り当てられますが、<em> や<code>などのネストラベルをクリックしても操作できます.
    <div onclick="alert('div에 할당한 핸들러!')">
  <em><code>EM</code>을 클릭했는데도 <code>DIV</code>에 할당한 핸들러가 동작합니다.</em>
</div>
    どうしてこんなことになったの?🤔
    エレメントにイベントが発生すると、エレメントに割り当てられたハンドラが操作され、親エレメントのハンドラが操作されます.このプロシージャは、最上位レベルの親要素に遭遇する前に繰り返し、各要素に割り当てられたハンドルによって操作されます.
    <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>をクリックするとどうなりますか?
  • 2<p>に割り当てるonclickハンドル実行動作
    • .
  • の外側に配する<div>のハンドル動作
    • .
  • 以外の<form>に割り当てるハンドル動作
    • .
  • ドキュメントオブジェクトに遭遇する前に、各要素に割り当てられたonclickプロセッサは
    • 操作を実行します.
    このような動作方式のため、<p>要素をクリックすると、p→div→form順のalertウィンドウが3つ出てくる…!

    event.target


    親要素のハンドルは、イベントが正確にどこで発生するかなどの詳細を取得します.
    イベントが発生する最も奥の要素をターゲット要素、eventと呼びます.targetを使用してアクセスできます.

    event.target vs this(=event.currentTarget)

  • event.targetは実際のイベントから始まる「ターゲット」要素であり、bundling中は
    • のままである.
  • これは「現在」の要素であり、現在実行中のプロセッサによって割り当てられた要素
    • を参照する.
    では、一番奥の<p>をクリックするとeventが見えます.ターゲットとイベント.CurrentTargetとは何ですか?
    event.targetは実際のイベントが始まる場所eventですtarget.tagNameはpです.
    event.CurrentTargetは、<form>要素上に位置するHandlerによって開始されるのでevent.currentTarget.tagNameはformです.
    では、<p>要素をクリックすると、p→div→formの順に3つのalertウィンドウが表示され、pのalertウィンドウを表示させるには、どうすればいいのでしょうか. event.stopPropagation();をご利用ください😊
    <body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
  <button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>
    次の例では、<button>をクリックしてもbodyです.onclickは動かない!

    event.stopImmediatePropagation()


    🧐 1つの要素の特定のイベントを処理するプロセッサが複数ある場合、1つのプロセッサがbundlingを停止しても、残りのプロセッサは実行を続行します.event.stopPropagation()は上向きの気泡を止めることができますが、他のハンドルの動きを止めることはできません.バブル化を停止し、要素に割り当てられた他のプロセッサの動作を阻止するにはeventを実行します.stopImmediatePropagation()を使用する必要があります.この方法では、要素に割り当てられた特定のイベントを処理するすべてのプロセッサが機能しません.
    次の章では、スクリーンショットと委任...😅

    reference

  • https://ko.javascript.info/events
    • プログラマの最高価格の作成(JavaScript)
    SQL Injection攻撃、XSS攻撃