이벤트 위임이란 무엇입니까? 그리고 왜 필요할까요?!

이벤트 위임은 하위 요소에 대한 이벤트를 관리하는 기능을 상위 요소에 위임하는 프로세스입니다.

다음을 사용하여 이를 수행할 수 있습니다.

이벤트 개체 및 해당 .target 속성

이벤트의 여러 단계(캡처 중/대상에서/버블링)

"허!"처럼 들릴 수 있으므로 예제를 찾아보고 나중에 여기로 돌아오겠습니다!

매우 유용한 이유를 보여주는 사례 연구!

200개의 단락 자식 요소가 있는 <div>가 있고 그 태그 중 하나<p>를 클릭할 때 메시지console.log를 원한다고 상상해 보십시오!
따라서 처음에는 다음과 같은 코드를 작성할 수 있습니다.

const myCustomDiv = document.createElement('div');

for (let i = 1; i <= 200; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    newElement.addEventListener('click', function respondToTheClick() {
        console.log('A paragraph was clicked.');
    });

    myCustomDiv.appendChild(newElement);
}

document.body.appendChild(myCustomDiv);

이 코드를 리팩터링할 수 있는 여러 가지 방법이 있습니다. 예를 들어, 현재 우리는 200개의 다른respondToTheClick()을 생성하고 있습니다(모두 실제로 동일한 작업을 수행합니다!). 200개의 서로 다른 함수를 만드는 대신 이 함수를 추출하고 참조할 수 있습니다.

const myCustomDiv = document.createElement('div');

function respondToTheClick() {
    console.log('A paragraph was clicked.');
}

for (let i = 1; i <= 200; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    newElement.addEventListener('click', respondToTheClick);

    myCustomDiv.appendChild(newElement);
}

document.body.appendChild(myCustomDiv);

그래서 함수를 200번 작성하지 않고 1개만 작성하여 이벤트 리스너 수에 대한 리팩토링을 했습니다!

그러나 여전히 200개의 이벤트 리스너가 있습니다. 그것들은 모두 동일한 리스너 기능을 가리키고 있지만 여전히 200개의 서로 다른 이벤트 리스너가 있습니다.
대신 모든 리스너를 <div>로 이동하면 어떻게 됩니까?

const myCustomDiv = document.createElement('div');

function respondToTheClick() {
    console.log('A paragraph was clicked.');
}

for (let i = 1; i <= 200; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    myCustomDiv.appendChild(newElement);
}

myCustomDiv.addEventListener('click', respondToTheClick);

document.body.appendChild(myCustomDiv);

이제 다음만 있습니다.

단일 이벤트 리스너

단일 리스너 함수
이제 브라우저는 200개의 서로 다른 이벤트 리스너와 200개의 서로 다른 리스너 함수를 메모리에 저장할 필요가 없습니다. 성능에 좋습니다!

그러나 개별 단락에 대한 액세스 권한이 상실되었음을 알 수 있습니다. 특정 단락 요소를 대상으로 할 수 없습니다. 그렇다면 이 효율적인 코드를 이전에 첫 번째 코드로 수행했던 개별 단락 항목에 대한 액세스와 어떻게 결합합니까?

프로세스 이벤트 위임을 사용합니다.

const myCustomDiv = document.createElement('div');

function respondToTheClick(evt) {
    console.log('A paragraph was clicked: ' + evt.target.textContent);
}

for (let i = 1; i <= 200; i++) {
    const newElement = document.createElement('p');
    newElement.textContent = 'This is paragraph number ' + i;

    myCustomDiv.appendChild(newElement);
}

document.body.appendChild(myCustomDiv);

myCustomDiv.addEventListener('click', respondToTheClick);

거의 완벽합니다!
메시지를 콘솔하기 전에 클릭한 태그가 실제로 <p> 태그인지 확인할 수 있는 것은 아무것도 없습니다. 200개<p> 태그에 다른 태그 형제가 있거나 부모<div> 요소에 약간의 패딩이 있고 실제<p> 태그를 클릭하지 않았다고 상상해 보십시오!

해결책? 노드 유형을 확인해야 합니다.
if (evt.target.nodeName === 'P') {} 또는 (evt.target.nodeName.toLowerCase() === 'p') {}

참고:
.nodeName 속성은 소문자가 아닌 대문자 문자열을 반환합니다. 따라서 확인을 수행할 때 다음 중 하나를 확인하십시오.

대문자 확인

. nodeName를 소문자

로


모든 크레딧은 Udacity와 나노디그리 프로그램에 있습니다.

행복한 코딩!