이벤트 버블링(Bubbling), 이벤트 캡쳐링(Capturing) - Githubissues

devSoyoung / STUDY

✏️ 공부한 내용 정리, 주제에 따라 분류

4 stars 1 forks source link

이벤트 버블링(Bubbling), 이벤트 캡쳐링(Capturing) #8

Open devSoyoung opened 5 years ago

devSoyoung commented 5 years ago

이벤트 버블링과 이벤트 캡쳐링의 차이

이벤트 버블링과 캡쳐링은 브라우저가 이벤트를 감지하는 방식

이벤트 버블링 : 특정 화면 요소에서 이벤트 발생 시, 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성
이벤트 캡쳐링 : 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식으로, 특정 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그를 찾아 내려감

event.stopPropagation()

해당 이벤트가 전파되는 것을 막음

이벤트 버블링의 경우 클릭한 요소의 이벤트만 발생시키고 상위로의 전달을 막음
이벤트 캡쳐링의 경우 클릭한 요소의 최상위 요소 이벤트만 발생시키고 하위 요소들로 전달을 막음

event.preventDefault()

stopPropagation()과 헷갈리지 말자

특정 엘리먼트에 기본으로 적용되어 있는 이벤트의 실행을 막음

<a>: 클릭했을 때, 페이지 이동이 발생하는데 preventDefault()로 막을 수 있음