JavaScript에서 이벤트 핸들러 최적화

요소에 추가된 과도하게 많은 핸들러는 많은 RAM을 소비하고 페이지 지연을 초래합니다.

예를 들어 살펴보겠습니다. 어떤 목록이 있다고 가정해 봅시다:

<ul></ul>

이 목록에 대한 참조를 변수에 가져옵니다:

let ul = document.querySelector('ul');

이제 우리 목록을 li 태그로 채우고, 클릭 핸들러를 부착해 보겠습니다:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
	
	li.addEventListener('click', function() {
		console.log(this.textContent);
	});
}

결국 우리는 1000개의 핸들러를 갖게 됩니다. 이것은 매우 많습니다. 최적화를 위해 이벤트 위임을 사용하여 ul 태그에 단 하나의 핸들러만 부착할 수 있습니다.

이제 해보겠습니다. 먼저 목록 항목을 만듭니다:

for (let i = 1; i <= 1000; i++) {
	let li = document.createElement('li');
	li.textContent = i;
	ul.append(li);
}

이제 이벤트 핸들러 위임을 수행합니다:

ul.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		console.log(li.textContent);
	}
});

100 x 100 크기의 HTML 테이블을 생성하세요. 각 셀을 클릭했을 때 빨간색으로 변하도록 만드세요.