[JS] 이벤트의 target과 currentTarget 차이 (with 버블링)

이벤트 핸들러의 Event 객체

JavaScript에서는 addEventListener() 메서드를 통해 DOM 요소에 이벤트 핸들러를 등록할 수 있다. 등록된 이벤트 핸들러는 호출될 때 자동적으로 Event 객체를 첫 번째 인자로 전달받는다. 보통 임의로 e나 event로 이름지어 사용하는 파라미터가 여기에 해당된다. 이 이벤트 객체는 앞으로 다루게 될 target, currentTaget과 같은 프로퍼티와 stopPropagation()과 같은 메서드 등을 가지고 있다.

const input = document.querySelector('.input');

// 파라미터명은 꼭 e가 아니어도 된다. 
const handleChange = (e) => {
    const { name, value } = e.target;
    console.log(name, value);
}

input.addEventListener('change', handleChange);

이벤트 버블링과 캡처링

부모 요소를 가지고 있는 요소에서 이벤트가 발생한 경우, 캡처링과 버블링이 차례대로 실행된다.

이벤트 캡처링은 최상위 부모 요소인 html 요소에서부터 처음 이벤트가 발생한 요소까지 자식 요소들을 타고 내려가 이벤트 핸들러가 있는지 검사하고, 있으면 그 이벤트 핸들러를 호출하는 것을 말한다. 반대로 이벤트 버블링은 처음 이벤트가 발생한 요소부터 html 요소에 이르기까지 부모 요소들을 타고 올라가 이벤트 핸들러가 있는지 검사하고, 있으면 그 이벤트 핸들러를 호출하는 것을 말한다.

기본적으로 모든 이벤트 핸들러는 버블링 단계에 동작하도록 설정되어 있다. 캡처링 타입의 이벤트 핸들러가 등록되어 있다면, 모든 캡처링 핸들러가 먼저 호출된 이후 버블링 핸들러가 호출될 것이다.

target 프로퍼티와 currentTarget 프로퍼티 비교

이 두 프로퍼티는 이벤트 버블링과 캡처링이 발생하는 순간에 차이가 명확해진다.

먼저 target은 이벤트가 처음 발생한 대상을 가리킨다. 반면에 currentTarget은 이벤트가 버블링 혹은 캡처링 되는 과정에서 현재 이벤트가 위치하고 있는 대상을 가리킨다. target과 같은 요소를 참조할 수도 있고, 다를 수도 있는 것이다.

버블링 예제

버블링 단계에서의 e.target과 e.currentTarget의 차이를 확인해보기 위해 아래와 같이 중첩된 구조의 레이아웃을 만들었다.

const outer = document.createElement("div");
const inner = document.createElement("div");
const button = document.createElement("button");

outer.id = "outer";
inner.id = "inner";
button.id = "button";

outer.innerHTML = "outer";
inner.innerHTML = "inner";
button.innerHTML = "button";

inner.appendChild(button);
outer.appendChild(inner);
app.appendChild(outer);

그리고 모든 요소의 클릭 이벤트 리스너에 printLog 함수를 등록했다.

function printLog(e) {
  const { target, currentTarget } = e;
  console.log(`currentTarget: ${currentTarget.id}, target: ${target.id}`);
}

outer.addEventListener("click", printLog);
inner.addEventListener("click", printLog);
button.addEventListener("click", printLog);

button 요소를 클릭했을 때의 결과를 보면, 이벤트 버블링으로 인하여 모든 요소의 클릭 이벤트 리스너에 등록된 printLog 함수가 호출되었음을 확인할 수 있다. 이 때, target은 최초로 이벤트가 발생한 button이고, currentTarget은 button부터 시작해 차례대로 printLog 함수가 호출된 부모 요소가 된다.

012

순서대로 button을 클릭했을 때, inner를 클릭했을 때, outer를 클릭했을 때의 결과

쿨하게 버블링 처리하기

stopPropgation()나 stopImmediatePropagation() 메서드를 사용하면 이벤트 전파를 막을 수 있다. 하지만 이 방법은 예상치 못한 버그를 발생시키기에 딱 좋다. 다른 개발자가 부모 요소에 정말 필요한 이벤트 핸들러를 등록해놨는데 내가 미처 그걸 인지하지 못하고 버블링을 막아버린다면? 그 순간 고난과 역경의 시작이다.

따라서 위의 방법보다는 target과 currentTarget을 사용하는 방법을 추천한다.

function printLog(e) {
  const { target, currentTarget } = e;
  // 클릭된 대상이 자기 자신일 때만 로직이 동작하도록 처리한다. 
  if (target !== currentTarget) {
    return;
  }
  console.log(`currentTarget: ${currentTarget.id}, target: ${target.id}`);
}

그러면 이렇게 더이상 버블링 되지 않고, 클릭한 요소에 등록된 이벤트 핸들러 하나만 호출이 되어 실행된다.

위에서부터 순서대로 button을 클릭했을 때, inner를 클릭했을 때, outer를 클릭했을 때의 결과

쿨하게 이벤트 위임하기

여러 자식 요소에 동일한 이벤트 핸들러를 등록해야 할 때, 버블링의 원리를 활용하면 부모 요소에만 이벤트 핸들러를 등록하여 처리할 수 있다. 이것을 이벤트 위임이라 한다.

아이템을 클릭하여 취소선을 토글하는 예제이다.

const ul = document.createElement("ul");
const li1 = document.createElement("li");
const li2 = document.createElement("li");
const li3 = document.createElement("li");

li1.innerHTML = "item 1";
li2.innerHTML = "item 2";
li3.innerHTML = "item 3";

ul.appendChild(li1);
ul.appendChild(li2);
ul.appendChild(li3);
app.appendChild(ul);

추천하지 않는 방법은 이렇게 똑같은 이벤트 핸들러를 여러 번 등록하는 것이다.

function toggleLineThrough(e) {
  e.currentTarget.style.textDecoration = !e.currentTarget.style.textDecoration
    ? "line-through"
    : "";
}

li1.addEventListener("click", toggleLineThrough);
li2.addEventListener("click", toggleLineThrough);
li3.addEventListener("click", toggleLineThrough);

이 때는 li 요소들이 전부 같은 부모 아래에 있기 때문에 부모에게 이벤트 위임을 하는 방법을 추천한다. e.currentTaget이 아니라 e.target을 사용하고 ul 요소에 딱 한 번만 toggleLineThrough 함수를 등록하면 된다.

function toggleLineThrough(e) {
  // e.target은 ul이 아니라 처음 이벤트가 발생한 li 요소를 가리킨다. 
  e.target.style.textDecoration = !e.target.style.textDecoration
    ? "line-through"
    : "";
}

ul.addEventListener("click", toggleLineThrough);