[TIL]イベント(Event)

16882 ワード

JavaScript TIL Event テキストリンク

≪イベント｜Events｜ldap≫

イベントの登録

イベントaddEventListner()は、以下の方法で登録できます.EventTarget.addEventListener(type, handler, [options])

type:イベントのタイプ

handler:イベント発生時にコールバックが実行され、イベント発生情報を通知するEventオブジェクトにのみ一意のパラメータがあります.

options:イベントフィーチャーを決定するオブジェクトで、次のpropertyがあります.

Capture:イベントをキャプチャするステップを指定するproperty.trueはスクリーンショット、falseはbundlingです.

once:trueイベントがトリガーされると、リスナーが自動的に削除されます.

パッシブ:trueは、プロセッサとして指定されたコールバックpreventDefault()メソッドが絶対に呼び出されないことを示す.

3番目のパラメータoptionsは、オブジェクトbooleanではなく形状であってもよく、変更captureと同じ値である.

イベントの伝播

キャプチャ

イベントは、最上位エレメントからターゲットエレメントに伝播します.

capturepropertyはtrueフェースキャプチャ方式で動作する.

バブル(Bubbling)

イベントは、ターゲット要素から最上位要素に伝播します.

capturepropertyはfalseまたは3番目の引数がない場合にbubbling方式で動作します.

イベントの伝播は1つだけ発生するのではなく、キャプチャからbundlingで終了し、capturepropertyのみで、どのフェーズでリスナーを実行するかを指定します.

stopPropagation()方法は、伝播を中断することができる.

委任イベント

イベント伝播のプロパティを使用して、親要素からサブ要素のイベントを管理します.

各要素に重複イベントを追加する手間が減り、コードもより簡潔になります.

動的に追加された要素をイベント処理できます.

カスタムイベント

ブラウザのデフォルトのイベントではなく、直接生成されたイベント

イベントの作成

Eventジェネレータを使用して新しいイベントを生成します.const event = new Event(type[, option])

type:イベントタイプを表します.typeは、ブラウザが提供する組み込みイベントであってもよいし、my-eventのようなカスタムイベントであってもよい.

option:イベントフィーチャーを定義するオブジェクト

泡:booleanタイプ、trueの場合、イベントは泡化します.

cancelable:booleanタイプ、trueはイベントを無効にするデフォルトの動作を示します(event.preventDefault()).

bubblesおよびcancelableの両方のデフォルトはfalseであり、2番目の引数がない場合、両方のプロシージャはデフォルトとみなされます.

上記のEvent()ジェネレータに加えて、CustomEvent()ジェネレータを使用してイベントを生成することもできます.const event = new CustomEvent(type[, option])既存のEvent()作成者とは異なり、optionは、オブジェクト形式のdetailpropertyを使用してイベントに情報を渡すことができ、読み取り者にカスタムイベントであることを明確に伝えることができる.

イベントの実行

イベントの実行にはEventTarget.dispatchEvent()メソッドが使用されます.EventTarget.dispatchEvent(event) dispatchEvent()ボタンclickをクリックせずに、メソッドを使用してイベントをトリガーする例.

<html>
  <body>
    <button type="button">Click?</button>
    <script>
      const $button = document.querySelector('button');
      $button.addEventListener('click', e => {
        console.log('Clicked!');
      });

      const event = new CustomEvent('click');
      setTimeout(() => {
        $button.dispatchEvent(event);
      }, 1000);      
    </script>
  </body>
</html>

ボタンをクリックしなくても、1秒(1000ミリ秒)後にclickイベントが自動的にトリガーされます.
内蔵イベントではなく任意のイベント名に変更しても正常に動作します.

<html>
  <body>
    <button type="button">Click?</button>
    <script>
      const $button = document.querySelector('button');
      $button.addEventListener('autoClick', e => {
        console.log('Clicked!');
      });

      const event = new CustomEvent('autoClick');
      setTimeout(() => {
        $button.dispatchEvent(event);
      }, 1000);      
    </script>
  </body>
</html>

ロック解除

書き込み(Throttling)

最後に呼び出された関数が一定時間経過した後に再呼び出されないようにする方法

主にパフォーマンスの向上に使用されます.

const $input = document.querySelector('input');
let timer = null;

$input.addEventListener('input', e => {
  const { value } = e.target;

  if (!timer) {
    timer = setTimeout(() => {
      console.log(value);
      timer = null;
    }, 500);
  }
});

ジャンプ

複数回呼び出された関数のうち、最後の関数のみを呼び出す方法

主にAPIとの通信回数を減らすために用いられる.

const $input = document.querySelector('input');
let timer = null;

$input.addEventListener('input', e => {
  const { value } = e.target;

  if (timer) {
    clearTimeout(timer);
  }

  timer = setTimeout(() => {
    console.log(value);
  }, 500);
});

UIレンダリング

悲観的なレンダリングストリーム

事件が起こる

サーバへの情報の変更を要求

サーバ応答リクエスト

応答に応じた状態の変更とレンダリング

楽観的なレンダリングフロー

事件が起こる

サーバに送信されたリクエストが正常に処理され、ステータスとレンダリングが事前に変更されていることを確認します.

サーバへの情報の変更を要求

リクエストが失敗したときに以前の状態に戻る

Reference

この問題について([TIL]イベント(Event)), 我々は、より多くの情報をここで見つけました https://velog.io/@jaeung5169/TIL-이벤트Event

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

Amazon OA

[白俊]1238号:パーティーの解答