JS - 이벤트 버블링 , 캡쳐 , 위임 / TIL - 14

이벤트버블링이 프로젝트하는 와중에 나를 너무 괴롭혀서 글을 포스팅해본다.

이벤트 버블링

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미

이벤트 캡쳐

이벤트 캡쳐는 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식

이벤트 위임

• 하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

event.stopPropagation()

• 이벤트 버블링의 경우에는 클릭한 요소의 이벤트만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해한다 그리고 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달한다.

내가 겪었던 문제

모달창구현 과정

모달을 보이게 하고 보이게 하지않는 boolean값을 설정

해당 값을 클릭이벤트에 넣어 조작하는 방식으로 구현하는 와중에 모달창 외부영역에 false로 바뀌게 하는 함수를 걸었음에도 내부를 클릭하는 과정에 있어서 계속해서 창이 닫히는 현상이 발생

검색결과 이벤트 버블링 현상과 비슷

평소에 하는 e.preventDefault를 썼으나 제대로 작동하지 않았음!

검색해보니 e.preventDefault 와 e.stopPropagation 둘의 차이!

e.stopPropagation는 이벤트가 상위 엘리먼트에 전달되지 않게 막아 줌

e.preventDefault 는 그 동작을 중단(html 에서 a 태그나 submit 태그는 고유의 동작이 있다. 페이지를 이동시킨다거나 form 안에 있는 input 등을 전송)