Javascript 이벤트 preventDefault, stopPropagation 정리

자바스크립트 이벤트를 사용하면서 Bubbling, Capturing, preventDefault, stopPropagation 의 개념을 기계적으로만 이해하고 로직의 구현만을 위해 구체적인 동작방식을 알고있지 않았다. 크게 이 두가지가 Capturing Phase, Bubbling Phase 의 흐름에 따라 동작하게 된다. 이벤트 리스너는 Capturing Phase에 동작할지, Bubbli...

preventDefaultJavaScriptstopPropagationJavaScript

preventDefault()와 stopPropagation()의 차이

기본적인 이벤트를 방지할 때 e.preventDefault()를 많이 사용했었는데 프로젝트에서 e.stopPropagation()가 사용되고 있어서 두 개의 차이를 알아보기로 했다 차이를 알아보기에 앞서 먼저 두 메서드가 어떤 역할을 하는지부터 간단히 알아봤다 a tag를 누르게 되면 href를 통해 이동을 하거나 새로고침이 발생하게 된다 이러한 기본동작을 실행하지 않도록 막아주는 역할을 하...

jsstopPropagationpreventDefaultevent handlingJavaScriptJavaScript

[JS30] -25) Event Capture, Bubbling, Propagation and Once

Bubbling 상위 div에 클릭 이벤트를 등록하고, 가장 안쪽 주황색을 눌렀을 때 하위 div에서부터 이벤트가 Bubbling 되어 three,two,one 순으로 출력된다. Capturing capture을 true로 주면 이벤트 캡처링으로 상위 div에서 하위 div로 전파되어 one,two,three 순으로 출력된다. Once를 true로 설정하면 이벤트를 들고해 한번 호출한 후 해...

oncestopPropagationcapturingbubblingevent delegationbubbling