• ex) 이벤트 캡쳐링 & 버블링
• ex) 이벤트 등록 & 해제
• ex) 이벤트 위임 방식

💬 Answer

🌏 이벤트 전파

👉 이벤트 버블링 - Event Bubbling

특정 화면 요소에서 이벤트가 발생했을 때 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성.
즉, 자식에서 부모에게 전파

👉 이벤트 캡쳐링 - Event Captureing

버블링과 반대로 진행되는 이벤트 전파 방식
즉, 부모에서 자식으로 전파

❗ event.stopPropagation()을 하게되면 이벤트의 버블링을 막음.
Javascript30 - 25번째 강의에서 실습.
참고링크

🌏 이벤트 위임 - Event Delegation

이벤트 위임을 한 문장으로 정리하자면,
하위에서 각각 이벤트를 붙이지 않고, 상위 요소에서 하위 요소의 이벤트를 제어하는 방식.

👉 이벤트 위임 Example

하위요소마다 이벤트를 달 경우.
만약 요소를 모두 가져와 이벤트를 추가하고, 그 밑에서 새로운 요소를 추가할 때.
=> 새로운 요소에는 이벤트가 달리지 않는다.

❓ Why
이벤트를 추가할 당시에는 처음 요소들만 가져와서 추가하기 때문에,
새로운 요소에는 이벤트가 추가되지않음.

❓ How
해결방법은?
=> 요소들을 감싸는 상위요소에 이벤트를 추가하여 하위요소의 이벤트를 감지한다.

📘 참고

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
https://github.com/JuneHyung/JavaScript30/tree/master/25%20-%20Event%20Capture%2C%20Propagation%2C%20Bubbling%20and%20Once