🔎 이벤트 위임이란 ?

이벤트 리스너를 하위 요소를 감싼 상위 요소에 추가하는 기법입니다.
리스너는 DOM의 event bubbling으로 인해서 하위 요소의 이벤트가 발생될 때
상위 요소로 이벤트가 전파되는데 하위 요소에서 발생한 이벤트를 상위 요소에서
처리할 수 있게끔 하는 방법입니다.

하위 요소에서 발생한 이벤트가 버블링되며 상위 요소까지 전달되면
상위 요소에 할당한 이벤트 핸들러에서 event.target 을 사용하여
어디서 이벤트가 발생하였는지 알 수 있으며 이를 통해 이벤트를 핸들링합니다.

📌 얻는 이점

• 모든 하위 요소에 이벤트 핸들러를 연결하지 않고 상위 요소 하나에만 이벤트 핸들러를 연결
  함으로써 결국 하나의 핸들러만 사용되기 때문에 메모리 사용공간과 코드의 양이 줄어듭니다.

• 추가되거나 제거된 하위 요소들에 대하여 이벤트의 추가 및 삭제를 할 필요가 없습니다.
  따라서 언제든 버튼을 추가하고 제거할 수 있어서 HTML 구조가 유연해집니다.

📌 이벤트 위임 활용

<div id="container" onClick='handleOnClick()'>
	<button>1</button>
	<button>2</button>
	<button>3</button>
</div>

버튼 하나하나에 이벤트를 걸어주지 않고 상위 요소인 div에 걸어주어
발생하는 모든 이벤트를 div 태그의 handleOnClick 함수로 처리해주는 것을 알 수 있습니다.

근데 이렇게하면 3개의 버튼 모두 동일한 동작을 하게되는데,
여기에 dataset을 사용하면 쉽게 다른 동작을 할 수 있게끔 할 수 있다.

<div id="todo" onClick='handleOnClick()'>
	<button data-action="조회">조회하기</button>
	<button data-action="추가">추가하기</button>
	<button data-action="삭제">삭제하기</button>
</div>

<script>
	class Todo {
		...생략
		onClick(event){
          	let action = event.target.dataset.action;
          	switch(action){
              case "조회":
                	...
                break;
              case "추가":
                	...
                break;
              case "삭제":
                	...
                break;
              default:
                	...
                break;
            }
        }
	}
	
</script>

위와 같이 이벤트 위임을 활용할 수도 있습니다.

📌 이벤트 위임의 단점

• 이벤트 위임을 사용하기 위해서는 반드시 이벤트가 버블링이 되어야합니다.
  - 버블링되지 않는 이벤트가 존재합니다.
• 하위 모든 요소에 대한 이벤트에 응답해야하므로 CPU의 작업 부하가 늘어날 수 있습니다.
  다만, 고려할 만한큼 많은 부하가 있는 것은 아닙니다.