DOM - 이벤트 위임(Event Delegation)

이벤트 위임이란 이벤트가 발생할때 이벤트 버블링에 의해 document 레벨까지 버블링 되어 올라가는데 

 

이 때문에 자식 element에서 발생하는 이벤트를 부모 element에서도 감지할 수 있다

 

이러한 작동 방식을 이용해 모든 자식 엘리멘트에 이벤트를 주는 것이 아닌 부모에게만 이벤트를 위임하는 방법이다 

 

<div class="btn__container">
      <button class="button">1</button>
      <button class="button">2</button>
      <button class="button">3</button>
</div>

 

버튼 컨테이너 안에 3개의 버튼이 있고 버튼을 누를때마다 알림창이 뜨는 기능을 만들고싶다고 치자 그렇다면 어떻게 해야할까?

 

const buttons = document.querySelectorAll('.button');

buttons.forEach(button =>
  button.addEventListener('click', () => alert('This is button'))
);

 

querySelectorAll을 이용해 button 클래스를 가진 모든 요소를 선택하고 반복문을 통해 모든 버튼에 이벤트 리스너를 달아주면 된다 이번엔 이벤트 위임을 통해서 기능을 개발해보자

 

const btnContainer = document.querySelector('.btn__container');

btnContainer.addEventListener('click', e => {
  if (e.target.classList.contains('button')) {
    alert('This is button');
  }
});

 

모든 버튼에 이벤트리스너를 다는것이 아닌 이벤트 버블링이 되는것을 이용해 버튼 컨테이너 하나에만 이벤트리스너를 부달아준다 그후 해당 이벤트의 클래스에 button 클래스가 있는 요소를 클릭할때만 알람창이 뜨게 해준다 

 

이렇게 이벤트 위임을 사용하면 얻는 이점이 뭘까?

 

 

1.메모리 효율성: 각각의 버튼에 이벤트 리스너를 따로 추가하지 않고, 부모 요소 하나에만 리스너를 추가하므로 메모리 사용이 줄어든다, 버튼이 3개가 아니라 100만개가 있다고 생각해보자 그 100개의 버튼에 모두 이벤트 리스너를 달면 메모리를 상당히 많이 써야할것이다.

 

2.유연성: 동적으로 버튼을 추가하거나 제거할 경우에도 별도로 이벤트 리스너를 추가할 필요 없이, 부모 요소에 추가된 하나의 리스너로 모든 자식 버튼의 이벤트를 처리할 수 있다.

 

3.유지보수성: 코드가 간결해지고, 동일한 이벤트 처리를 여러 곳에 추가하지 않아도 되어 유지보수가 쉬워진다