이벤트 위임 (Event Delegation)

event capture 와 bubbling을 이용해 이벤트 위임을 구현할 수 있다. ul안에 수많은 li가 있거나 테이블 안에 많은 tr, td가 있을 때 모든 elements들에 다 event를 거는 것은 번거롭다.

이를 ul 또는 table에 이벤트를 걸어서 이벤트 위임을 통해서 편하게 이벤트 핸들링을 할 수 있다.

즉, 컨테이너에 하나의 이벤트 핸들링을 달아놓고 그곳에 조건을 추가해 원하는 이벤트를 발동 시키는 것이다.

원하는 조건은 event.target을 이용하면 자신이 원하는 상황인지 판단할 수 있다.

cloest, [html의 data-OOO 속성, js의 event.target.dataset.OOO] 등을 이용하면 event.target을 이용해 원하는 조건을 쉽게 만들 수 있다.

ex)

cloest 이용 예제

이 li의 하위에 있는 태그를 클릭해서 li를 삭제하고 싶다면

이런식으로 원하는 li를 찾아서 삭제할 수 있다.

ul.addEventListener("click", handleClick);

function handleClick({ target }) {
  const li = target.cloest("li");
  li.remove();
}

data 속성 이용 예제

버튼눌러서 버튼 숫자 1씩 늘리기

dataset을 이용해서 조건을 걸어주면 편리하다.

//버튼 : <input type="button" value="1" data-counter>
document.addEventListener("click", ({ target, target: { dataset } }) => {
  if (dataset.counter !== undefined) target.value++;
});

!! addEventListener vs onclick

.onclick으로 작성할 경우 새로운 핸들러가 이전의 핸들러를 덮어쓸 경우가 있습니다. onclick을 사용할 때는 항상 조심해야 된다.

그렇기 때문에 addEventListener를 사용하는것이 좋다고 생각된다.

참조 : https://ko.javascript.info/event-delegation