JavaScript | event.target 이벤트 위임

오늘은 event.target (이벤트 위임)에 대해 정리한다.

자바스크립트의 이벤트 중에서 클릭한 요소를 가져오는 방법이다.

아래와 같이 li 안에 button이 있는 상황에서 button을 누르면 li가 사라지는 객체를 만들 때, event.target은 button이 된다. 즉, event.target은 이벤트 버블링의 가장 최하위 요소를 가리킨다.

btn = event.target으로 정의해서 사용한 예제이다.

function deleteToDo(event) {
  const btn = event.target;
  const li = btn.parentNode;
  toDoList.removeChild(li);
  const cleanToDos = toDos.filter(function (toDo) {
    return toDo.id !== parseInt(li.id);
  });
  toDos = cleanToDos;
  saveToDos();
}

혹은 event.target의 closest 메소드 혹은 tagName을 활용할 수도 있다.

container.onclick = function(event) {
      if (event.target.className != 'remove-button') return;

      let pane = event.target.closest('.pane');
      pane.remove();
    };

// move all text into <span>
    // they occupy exactly the place necessary for the text,
    for (let li of tree.querySelectorAll('li')) {
      let span = document.createElement('span');
      li.prepend(span);
      span.append(span.nextSibling); // move the text node into span
    }

    // catch clicks on whole tree
    tree.onclick = function(event) {

      if (event.target.tagName != 'SPAN') {
        return;
      }

      let childrenContainer = event.target.parentNode.querySelector('ul');
      if (!childrenContainer) return; // no children

      childrenContainer.hidden = !childrenContainer.hidden;
    }

참고

이벤트 위임

https://developer.mozilla.org/ko/docs/Web/API/EventTarget