JavaScript - 이벤트 다루기

✅ 이벤트 전파

1️⃣ 이벤트 버블링

• Event bubbling
  * 한 요소에 이벤트가 발생하면, 요소의 할당된 핸들러가 작동하고, 이어서 부모 요소의 핸들러가 작동합니다.

  💁🏻‍♀️ 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가는 현상이 바로 '이벤트 버블링'입니다.

• 버블링 중단
  * 이벤트 객체의 메서드인 event.stopPropagation() 을 사용하면 됩니다.

  💁🏻‍♀️ event.stopPropagation() 는 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러는 막지 못합니다.

2️⃣ 이벤트 캡처링

• Event capturing
  • 버블링과 반대로 상위 ➡️ 하위로 전파합니다.
• 캡처링 중단
  • capture 옵션을 설정해야합니다.
  • 문법 : elem.addEventListener(..., true)
    • capture 옵션은 두가지 값을 가지고 있습니다.
      • false면 핸들러는 버블링 단계에서 동작(디폴트)
      • true면 핸들러는 캡처링 단계에서 동작

3️⃣ 이벤트의 흐름

1. 캡처링 단계 : 이벤트가 하위 요소까지 전파
2. 타깃 단계 : 이벤트가 실제 타깃 요소에 전달
3. 버블링 단계 : 이벤트가 상위 요소로 전파

✅ 이벤트 위임

❓ 이벤트를 동작할 때, 만약 <li> 태그 6개에 걸어야 한다면 어떻게 작성하실건가요?

• 이렇게 <li> 태그를 querySelectorAll 로 불러와서 반복문으로 작성할 수 있습니다.
  하지만 이렇게 작성하게 되면 <li> 개수만큼의 이벤트 리스너가 생성되어 메모리를 많이 잡아먹게 될 것 입니다.(개발자 입장에서는 편하지만..)
  이런 경우에는 이벤트 위임을 사용하면 메모리를 적게 사용할 수 있습니다.

• 사용 방법 : 부모 요소에 이벤트 등록 (예: <li> 클릭 시 배경색상 변경 )