Javascript 이벤트 preventDefault, stopPropagation 정리

자바스크립트 이벤트를 사용하면서 Bubbling, Capturing, preventDefault, stopPropagation 의 개념을 기계적으로만 이해하고 로직의 구현만을 위해 구체적인 동작방식을 알고있지 않았다. 구체적인 알고리즘과 개념이 머릿속에 정립되지 않은 것이 개발자로서 계속 신경쓰여, 호기심이 생긴 김에 예제를 돌려가며 한없이 구체적이고 정확한 개념을 정립하는 시간을 갖고자 한다. 이 예제를 이해하면, preventDefault 와 stopPropagation 을 제대로 사용할 수 있을것이라 자신한다.

설명에 앞서, Bubbling 과 Capturing 의 개념은 다른분의 포스팅에 잘 정리돼있을 뿐더러, 해당 개념을 이미 알고 있다고 가정하고 진행할 것임을 밝힌다.

웹에서 발생하는 이벤트의 종류는 크게 2가지로 분류할 수 있다.

  • 디폴트 이벤트 : a 태그 클릭 시 hyper reference 로 이동하는 동작, form이 submit 되는 동작 등 기본적으로 태그가…