이벤트 위임이 뭔가요?

키워드
버블링을 활용한 예, 최적화 용도

버블링의 자식 → 부모 이벤트로 이어지는 현상을 활용한 예이다. 형제 엘리먼트가 여러개이면서, 이를 감싸고 있는 부모 엘리먼트가 있는 경우, 형제 엘리먼트에 여러번 이벤트를 등록하기 보다는, 부모 엘리먼트에 이벤트를 걸어 형제 엘리먼트에서도 해당 이벤트를 호출 할 수 있도록 하는 것이다. 이렇게 하면, 형제 엘리먼트에 이벤트를 여러개 걸어야 할 것을, 하나의 이벤트로 충당하는 것이 가능하다.

이러한 기능적 최적화 외에도, 향후 형제 엘리먼트가 추가 되더라도, 동일한 이벤트를 사용하는 경우라면 따로 작업해 줄 필요가 없다는 점에서 유지 보수 측면에서 장점이라고 할 수 있겠다.

나의 경우에는 closest() 를 많이 활용하는 편이다. 특히 형제 엘리먼트이지만 모두 다른 이벤트를 걸어줘야 하는 경우 유용하다. 유저와 상호작용한 엘리먼트가 가운데 해당 DOM 속성을 가진 가장 가까운 엘리먼트를 찾아 반환해준다.

행동 패턴

키워드
커스텀 속성, 선언적 이벤트 할당

이벤트 위임을 극단적으로 활용한 패턴으로, 예를 들어 웹사이트에 나오는 버튼마다 동일한 이벤트가 필요한 경우, 커스텀 속성을 선언하여 전역에서 이벤트를 할당하는 방식이다.

<input type="button" value="내이름은레오" data-callMe/>
<input type="button" value="내이름은해피" data-callMe/>

...
document.addEventListener("click", (e) => {
	if(e.target.dataset.callMe) {
		console.log(e.target.value);
	}
});