[DOM]: 이벤트 버블링을 이용해 하위 요소 전체 다루기(e.target, e.currentTarget)

옵션들을 forEach로 반복시켜서 이벤트를 주는 방식이 아닌 event.target으로 옵션들의 부모요소 ul을 참조해 이벤트를 위임시키면 반복문을 쓰지않고도 옵션들에 이벤트를 줄 수 있다. 옵션이 많아지면 반복문이 돌아갈때 성능이슈도 있으니 탁월한 방법이다.

li 부모 태그인 ul태그에 한 번반 이벤트리스너하면 된다. 부모ul태그에 한번만 등록해놓고 자식 li클릭시(버블링은 기본값) 버블링을 활용하면 하나의 이벤트리스너로  li 요소들 전체를 다룰수있다. 단 모든 이벤트가 버블링이 발생하는건아니다. click은 버블링이 기본으로 발생한다.

 

const billboard = document.querySelector('billboard');
const ul = document.querySelector('ul');
const h1 = document.querySelector('h1');
const button = document.querySelector('button');
let isETarget = 1;

const eTarget = (e) => {
  if (e.target.id !== 'ul') {
    h1.textContent = e.target.id;
  }
};

const eCurrentTarget = (e) => {
  h1.textContent = e.currentTarget.id;
};

button.addEventListener('click', function () {
  if (isETarget) {
    ul.removeEventListener('click', eTarget);
    ul.addEventListener('click', eCurrentTarget);
    isETarget = 0;
    button.textContent = 'e.currentTarget';
  } else {
    ul.removeEventListener('click', eCurrentTarget);
    ul.addEventListener('click', eTarget);
    isETarget = 1;
    button.textContent = 'e.target';
  }
});

ul.addEventListener('click', eTarget);

 

추가로 li태그가 아닌 회색 영역의 ul태그가 누르면 이벤트 핸들러의 코드가 작동하지 않게 코드를 작성하였다.

 if (e.target.id !== 'ul') {
    h1.textContent = e.target.id;
  }

e.target은 이벤트 발생의 진원지, e.currentTarget은 이벤트 핸들러 연결 대상을 뜻한다.

 

 

하지만 모든 이벤트가 버블링 되는 것은 아니다.

mouseover 이벤트는 이벤트 버블링이 적용되는 이벤트이기 때문에 내부의 div 태그 안에 들어가도 이벤트를 또 다시 발생시킨다.  반면에, mouseenter 이벤트는 해당 엘리먼트 안에 있는지 외부에 있는지만 따지기 때문에 이벤트가 한 번만 발생하게 된다. 😎