이벤트 버블링, 이벤트 캡처 그리고 이벤트 위임까지

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/

이벤트 버블링 왜 생김 ?
특정 요소에서 이벤트가 발생했을 때, 브라우저가 하위에서부터 최상위에 있는 화면 요소로 해당 태그를 찾아나감

그렇게 하위에서 최상위로 이벤트를 전파시키기 때문에 이벤트가 달려 있는 태그 중에서도 하위에서부터 이벤트가 실행된다.

이걸 이벤트 버블링이라고 한다. 이렇게 동작하는 이유는 브라우저가 기본적으로 이렇게 동작하기 때문이다.

이벤트 캡처 왜 생김?
addEventListener('click','logEvent,{capture:true})
세번째 인자에 저런 걸 넣어줘서 생김

특정 요소에서 이벤트가 발생했을 때, 최상위 요소에서 하위 요소로 해당 태그를 찾아나감

그렇게 최상위에서 하위 요소로 이벤트를 전파시키기 때문에 이벤트가 달려 있는 태그 중에서도 최상위에서부터 이벤트가 실행된다.

이걸 이벤트 캡처라고 한다. addEventLister의 옵션 객체에 capture: true를 설정하면 이렇게 동작한다.

뭐 그냥 원하는 화면 요소의 이벤트만 신경 쓰고 싶다면 stopPropgation() 웹 API를 사용하면 됨.

이벤트 위임 어떻게 하는 거임?
음 걍 상위 태그에 이벤트 줘서 (예를 들면 ul 태그에 이벤트 줘서 li에 이벤트 다 적용하게 하는 것), 나중에 li를 추가해도 li이 이벤트가 바로 적용되도록 하는 것