JavaScript의 이벤트 위임 소개.

개발자 여러분, 이벤트 위임에 대해 알아봅시다.😁

이벤트 위임을 이해하려면 먼저 이벤트 리스너가 작동하는 방식을 파악해야 합니다.

아래 코드를 보세요.

const sampleDiv = document.getElementById("sampleDiv");
sampleDiv.addEventListener("click", function (event) {
  alert("Sample Div clicked");
});

우후, 이벤트 리스너를 추가했습니다.
위의 코드에서 주의할 사항 -

브라우저는 항상 이벤트 객체를 콜백 함수의 매개변수로 제공합니다.

Event 객체는 많은 속성을 제공하지만 여기서는 event.target 및 event.currentTarget 속성에 중점을 둘 것입니다.

상황을 가정해보자

간단한 할 일 앱을 가정해 보겠습니다.

//HTML
<div id="sampleDiv"></div>
<button id="AddBtn">Add todo</button>
//NOTE: some basic CSS is applied on these elements.

//JavaScript
<script>
  const sampleDiv = document.getElementById("sampleDiv");
  const AddButton = document.getElementById("AddBtn")
  AddButton.addEventListener("click", function (e) {
        let todo = document.createElement("p");
        todo.className = "todoToRemove";
        todo.textContent = "Click me to remove";
        sampleDiv.appendChild(todo);
  });
</script>

그리고 위의 코드는 다음을 수행합니다.



todo를 제거하기 위해 todo(the paragraph)를 클릭하고 싶습니다. 그래서 각 todo에 이벤트 리스너를 붙이고 다음과 같이 todo를 클릭하면 todo를 제거할 수 있다고 생각합니다.

const Todos = document.getElementsByClassName("todoToRemove");
for (let i = 0; i < notes.length; i++) {
  const element = notes[i];
  element.addEventListener("click", function (e) {
    element.remove()
  });
}

그러나 작동하지 않습니다.
자바스크립트를 통해 todo를 동적으로 추가하고 있기 때문에 위의 코드가 먼저 실행되지만 todo가 없으므로 리스너가 이들 중 하나에 연결됩니다.

그렇다면 이 문제를 어떻게 해결할 수 있을까요?

여기에 이벤트 위임의 개념이 있습니다. 이론적으로 이벤트 위임에서 일어나는 일은 이벤트 리스너를 부모 요소에 연결하는 것입니다. 이벤트가 트리거된 실제 요소를 생성하는 event.target 속성을 확인합니다.

So, the key takeaway is event.currentTarget is the actual element on which the event listener is attached. And, event.target is the element on which the actual event happened.

이벤트 위임 문제 해결

이 간단한 코드로 todo 제거 문제를 해결할 수 있습니다.

sampleDiv.addEventListener("click", (event) => {
   if (event.target.matches("p")) {
      event.target.remove();
   }
});

//NOTE: the remove function have less support on legacy browsers. so, you can also use this line inside if statement - 
event.currentTarget.removeChild(event.target);

그리고 이것은 완벽하게 작동합니다.



부모에 이벤트 리스너를 추가하고 event.target가 p 태그인지 확인했습니다. true인 경우 제거 함수를 호출하여 dom 트리에서 제거합니다.

이벤트 리스너를 부모에 추가하는 이 전체 개념을 이벤트 위임이라고 합니다.

그게 내 쪽이야. 그때까지👋👋