이벤트 위임

🤩 이벤트 위임이란❓

 

🌱 이벤트 위임이란 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말합니다.

부모 안에 있는 자식들에게 공통적으로 무언가 처리해야 할 때 일일히 이벤트 리스너를 자식 노드에 추가하는 것은 좋지 않습니다.이벤트 버블링을 응용하여 부모 엘리먼트에 리스너를 위임하여 부착하면, 리스너의 개수를 1개로 줄여 최적화할 수 있습니다.

---

🍄  이벤트 위임의 동작

1. 컨테이너에 하나의 핸들러를 할당합니다.
2. 핸들러의 event.target 을 사용해 이벤트가 발생한 요소가 어디인지 알아냅니다.
3. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링합니다.

🍄 이벤트 위임의 장점

• 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거할 필요가 없기 때문에 코드가 짧아집니다.
• 동적인 엘리먼트에 대한 이벤트 처리가 수월하다.
• DOM 수정이 쉬워짐 : 상위 엘리먼트에서만 이벤트 리스너를 관리하기 때문에 하위 엘리먼트는 자유롭게 추가 삭제할 수 있다.
• 이벤트 핸들러 관리가 쉽다.
  • 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약됩니다.
  • 메모리 누수 가능성도 줄어든다.

🍄 이벤트 위임의 단점

• 이벤트 위임을 사용하려면 이벤트가 반드시 버블링 되어야 합니다.
  • 버블링 되지 않는 일부 이벤트가 존재함.
  • 낮은 레벨에 할당한 핸들러엔 event.stopPropagation()를 쓸 수 없습니다.
• 컨테이너 수준에 할당된 핸들러가 모든 하위 컨테이너에서 발생하는 이벤트에 응답해야함
  • CPU 작업 부하가 늘어날 수 있습니다.
  • 이런 부하는 무시할만한 수준이므로 실제로는 잘 고려하지 않음

🍄 리액트에서의 이벤트 위임

• 리액트에서는 자체 이벤트 시스템을 갖고 있어서, 이미 document 최상단에서 이벤트를 잡아 자체적으로 처리(리액트 v16.0)
• 참고: 리액트 v17.0에서, 이벤트 리스너를 document에 붙이는 것이 아니라 리액트가 관리하기 시작하는 div에 붙이는 것으로 바뀜.
• 이벤트 위임을 통한 성능상의 이득은 없다고 봐도 무방.
• 각 돔 노드에 빈 이벤트 리스너가 달려있기는 하지만, iOS 와 사파리 브라우저를 호환하기 위한 대비책.(동작하지 않는 no-op 함수가 똑같이 바인딩되어 있음)