🦎 [深潜学習]3 rd-40イベントハンドラ

7054 ワード
テキストリンク
Jay

1.イベントハンドラの登録時に関数宣言を割り当てる登録方法と、関数参照として割り当てない理由を説明します。


a.アクセス方式:アクセス値に関数呼び出し文などの文を割り当てると、イベントハンドラが登録されます.
関数参照ではなく呼び出し文が割り当てられていることに注意してください.イベントハンドラ登録とは、関数呼び出しをブラウザに委任し、登録時にコールバック関数のように関数参照を登録する必要があり、ブラウザがイベントハンドラを呼び出すことができます.参照ではなくページング文が登録されている場合、ページング文の評価結果はイベントハンドラとして登録されます.戻り関数の高次関数呼び出し文をイベントハンドラとして登録すると問題はありませんが、戻り値の関数呼び出し文が登録されている場合、ブラウザは呼び出せません.複数のハンドルを使用...かもしれません.
b.イベントハンドラの構成方法:
domノードオブジェクトには、イベントに対応するイベントハンドラpropertyがあります.この関数をバインドすると、イベントハンドラが登録されます.イベントハンドラは、DOMノードオブジェクト上の바인딩において、イベントターゲットまたは伝播イベントをキャプチャする.しかしながら、欠点は、イベントハンドラ構成において1つのイベントハンドラのみをバインドできることである.
c.add EventListenerメソッド:
最後のパラメータは、イベントをキャプチャするイベント伝播レベル(キャプチャまたはバブル)を指定します.falseを指定するとbundlingフェーズでイベントがキャプチャされます.trueの場合、イベントはキャプチャフェーズでキャプチャされます.これにより、1つ以上のイベントハンドラを登録できます.(q.ただし同一イベントハンドラの重複登録を参照すると、1つのハンドラのみ登録…)同じ=1、2、3を参照して同じ値を指定…?レプリカを完全に割り当てた場合...修行は1つだけ...

2.targetとcurrentTargetpropertyの違いを説明し、この2つの値が異なる場合を説明します。


target:イベントを励起するドーム要素
current target:イベントハンドラをバインドしたdom要素
通常は同じドーム要素を指しますが、後で表示されるイベント委任では、オブジェクトのターゲットプロファイルと現在のターゲットプロファイルが異なるドーム要素を指すことができます.ex)実施時外部被覆層実施...何人かの子供がいたら、親に活動を任せて...
stop伝搬→気泡を阻止する.キャプチャを阻止できるケースはあまりありません.
(ウィンドウ)キャプチャ=ターゲット=>バブル
c.f) preventdefualt? alinkのように転ばないように...(ブラウザのフェイルオーバー動作)

3.次のコード文では、button 1とbutton 2でクリックイベントが発生したときに画面がどのように変化するかをそれぞれ説明し、原因を説明します。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <button class="button1">0</button>
    <button class="button2">0</button>
    <script>
      const $button1 = document.querySelector(".button1");
      const $button2 = document.querySelector(".button2");

      $button1.onclick = function (e) {
        ++this.textContent;
      };

      $button2.addEventListener("click", (e) => {
        ++this.textContent;
      });
    </script>
  </body>
</html>
()‐‐‐の場合,ウィンドウオブジェクトはthis!!だからカウントは上がらない

指定した値自体は関数ではありません./今すぐ実行します.コンソールを開く...
TypeScriptを紹介し、開発環境を構築!
[leet 42]2つのポインタ、1つずつ移動