JavaScript에서 루프를 사용하여 이벤트 핸들러 추가하기

이제 요소들에 대량으로 이벤트 핸들러를 추가하는 방법을 배워봅시다. 예를 들어, 다음과 같은 단락이 있다고 가정해 보겠습니다:

<p>text1</p>
<p>text2</p>
<p>text3</p>

또한 다음과 같은 함수가 있다고 가정해 봅시다:

function func() {
	console.log('!');
}

이제 단락들을 루프로 순회하며 각 단락에 클릭 핸들러로 함수 func를 추가해 봅시다:

let elems = document.querySelectorAll('p');

for (let elem of elems) {
	elem.addEventListener('click', func);
}

한 걸음 더 나아가, 어떤 단락을 클릭하든지 해당 단락의 텍스트가 출력되도록 만들어 봅시다. 그러나 문제가 하나 있습니다: 단락은 많은데, 핸들러 함수는 하나뿐입니다. 핸들러 함수 내부에서 우리의 단락들을 어떻게 구분할 수 있을까요?

this 객체가 이를 도와줄 것입니다 - 이벤트 발생 시점에 함수가 호출될 때, 이 객체는 이벤트가 발생한 요소를 가리키게 됩니다. 앞서 설명한 내용에 따라 함수 func의 코드를 수정해 보겠습니다:

function func() {
	console.log(this.textContent); // 단락의 텍스트를 출력합니다
}

다음 함수가 주어졌습니다:

function func() {
	this.value = Number(this.value) + 1;
}

또한 입력 필드들이 주어졌습니다. 우리 입력 필드 중 어느 하나에서 포커스를 잃을 때 위의 함수가 실행되도록 만드세요.

숫자가 있는 단락들이 주어졌습니다. 어떤 단락을 클릭하든지 그 안의 숫자가 제곱이 되도록 만드세요.