委任イベント(イベント委任)

いつ使いますか。

:複数の要素を同様に処理する必要がある場合に使用します.
イベント委任は、各要素にハンドラを割り当てるのではなく、イベントハンドラを要素の共通の親要素に一度割り当てるだけで、複数の要素を同時に処理できます.(feat.繰り返し文、親要素...)

使用例

[html]
<ul>
	<li>a</li>
	<li>b</li>
</ul>

[js]

// 반복문을 통한 이벤트 위임
const $li = document.querySelectorAll("ul > li");

for (let i = 0; i < $li.length; i++) {
	$li[i].addEventListener("click", (event) => {
    	console.log(event.currentTarget.textContent);
    })
}

// 공통의 부모요소를 통한 이벤트 위임
ul.addEventListener("click",function(evt) {
	const liText = evt.currentTarget.firstElementChild().textContent;
    	console.log(liText);
});

event.target

:一部の要素をクリック

event.currentTarget

:イベントに割り当てられた要素

$.firstChild()

:最初のオブジェクトをインポート

$.firstElementChild()

:最初のノードオブジェクトをインポートします.
場合によっては、firstChildが一度に見えないオブジェクトを取得します.

$.tagName

:オブジェクトタイプ名の取得
ex )

$input.tagName(); 	// input

[注]https://ko.javascript.info/event-delegation