이벤트 위임

• 유사한 요소에 동일한 핸들러 적용할 떄 주로 사용함

• 알고리즘 순서

  1. 컨테이너에 하나의 핸들러 할당

  2. 핸들러의 event.target 사용해 이벤트가 발생한 요소 찾음

  3. 원하는 요소에서 이벤트 발생했다고 확인 시 이벤트 핸들링

• 이벤트 위임의 장점

  1. 많은 핸들러 할당하지 않아도 되기 떄문에 초기화 단순해지고 메모리 절약됨

  2. 묘소 추가하거나 제거할 떄 해당 요소에 핸들러 추가나 제거할 필요 없기 떄문에 코드 짧아짐

  3. innerHTML 이나 유사한 기능 하는 스크립트를 요소 동어리를 더하거나 뺼 수 있어 DOM 수정 쉬워짐

• 이벤트 위임의 단점

  1. 이벤트가 반드시 버블링이 돼야 하기 떄문에 버블링 되지 않는 이벤트에선 이용할 수 없으며 낮은 레벨에 할당한 핸들러엔 event.stopPropagation() 쓸 수 없음

  2. 컨테이너 수준에 할당된 핸들러가 이벤트에 대해 응답할 필요 여부 상관 없이 모든 이벤트에 응답해야 하므로 CPU 작업 부하 걸릴 수 있음 (무시할 만 하므로 실제로는 잘 고려 안 함)

• 이벤트 위임 활용으로 컨테이너 전체에 핸들러 하나 추가해주고 각 요소의 속성에 원하는 값 넣어서 호출할 메서드 할당 가능

• ‘행동’ 패턴

  • 이벤트 위임을 요소에 선언적 방식으로 ‘행동’ 추가로 사용 가능

  • 요소의 행동을 설명하는 커스텀 속성을 요소에 추가하고 문서 전체를 감지하는 핸들러가 이벤트를 추적하게 해서 추가한 속성이 있는 요소에서 이벤트 발생 시 작업 수행하게 함