[TIL]フロントエンドDay 20

📚 学習の内容

1. Event

≪イベント｜Events｜ldap≫

イベントは主にユーザーの操作(マウスをクリックするか下にスクロールする)によって引き起こされます.DOM Elementでは、addEventListenerを使用してイベントハンドラを登録し、特定のイベントが発生したときにどのように処理するかを指定できます.1つのElementに複数のイベントがあるか、またはremoveEventListenerを使用して削除できます.Handlerが登録されているelementでイベントが発生した場合、ブラウザはイベントに関する詳細情報をEvent Objectに格納し、Handlerに渡します.

アクティブな状態

イベントは3段階にわたって生成され、破棄されます.

Capturing Phase
DOMツリーの最上位要素からイベントが発生したターゲット要素に伝播するには.

Target Phase
イベントが実際のターゲット要素に伝播するには

Bubbling Phase
イベントがターゲット要素から最上位要素に伝播するには
(キャプチャフェーズとは逆)

オプションなしでaddEventListenerを使用する場合、Handlerアクションのステップは、ターゲットフェーズとBubblingフェーズです.また、captureオプションがtrueの場合、capturingPhaseからHandlerが動作します.

以上のように、3つの<div>elementが重なる場合、div 3をクリックしてイベントが発生したと仮定します.キャプチャフェーズでは、イベントはdiv 1−div 2−div 3の順に伝播する.イベントが発生したdiv 3でターゲットフェーズを行い、Bubblingフェーズでdiv 3-div 2-div 1の順にイベントを伝播します.

イベントの説明

ある要素にイベントが発生したときに実行したいコードがある場合、通常はその要素にaddEventListenerが使用されます.しかし、このような要素がたくさんあるとしたら?イベントハンドラをすべての要素に盲目的に割り当てると、メモリが多すぎて、パフォーマンスもあまり効果的ではありません.この場合に使用できるモードがイベントトリガモードである.
イベントトリガモードはイベントbundlingを使用します.イベントハンドラを割り当てる必要がある複数の要素を親要素としてカプセル化し、その親要素にのみハンドラを割り当てます.

上記の要素構造において<div>element割当イベントハンドラであれば、4つの<button>でイベントが発生してもbublingによって<div>のイベントハンドラが呼び出される.また、target propertyで、targetになるサブ要素を決定することもできます.

<div id="button-container">
  <button id="button1">Button1</button>
  <button id="button2">Button2</button>
  <button id="button3">Button3</button>
  <button id="button4">Button4</button>
</div>

const $div = document.querySelector('#button-container');

$div.addEventListener('click', (e) => {
  const $targetElement = e.target;
  if ($targetElement.id === "button1") {
	// do something
  } else if ($targetElement.id === "button2") {
    // do something
  } 
  ...
});

上記のコードは、イベントプレゼンテーションを使用する例です.これにより、イベント降格モードを使用して、1つのプロセッサで複数のイベントを処理できます.

イベントの降格

イベントジッタは、イベントハンドラの動作を制御するテクニックです.同じイベントが短い時間間隔で複数回発生した場合、イベントの処理が一定時間遅延し、一定時間後にイベントが発生しなかった場合、最後のイベントのみが処理される.
自動保存機能を備えたドキュメントエディタを実現することを想定してみましょう.ドキュメントの内容が変更されるたびにイベントが発生して変更が保存される場合、イベントハンドラは1文字入力するたびに操作します.「こんにちは」という簡単な文字を入力しても、他の処理がなければイベントハンドラは12回動作します.ストレージがAPIによって実装されると、パフォーマンスが低下します.
イベントデバッガは、Event ObjectおよびsetTimeoutを使用して実装される.

let timer = null;
const delay = 2000;
$element.addEventListener('change', (e) => {
	if(timer !== null) {
		clearTimeout(timer);
    }
  	time = setTimeout(() => {
    	//do something
    }, delay)
});

イベントが発生すると、clearTimeoutが実行され、タイマがsetTimeoutにタイムアウトすると、実行するコードが機能します.ただし、所定の時間前に同じイベントが発生した場合、delayは以前のタイマをキャンセルし、新しいタイマは最初から開始されます.

📝 勉強を続ける

clearTimeoutwacustomイベント

イベント手書き

🤔 に感銘を与える

非コピー週間だったのでTILを書いていませんでした.プロジェクトについても考えなければならないことが多く、必要なところだけを探して書くので、勉強の内容を整理するのは難しいです.改めて決意してイベントから丁寧に整理してみましたが、内容はこうで、範囲が広すぎて深すぎます.やはり勉強には終わりがない.😅

Reference

プログラマフロントエンドプログラムコース

JAVASCRIPT.INFO、ブラウザイベントの概要
https://ko.javascript.info/introduction-browser-events