jQuery 이벤트 버블링 부작용

jQuery 이벤트 부작용

페이지의 이벤트가 발생하면 DOm전체계층에 요소들이 이벤트를 처리 할 수 있을때가있다. 이벤트가 있는 html이다음과 같다고 보자.

이벤트 캡처링(capturing)

여러 엘리먼트 가있을때 이에 한번클릭에 반응하는것을 이벤트 캡처링이라고 한다.아래그림처럼 최상위 엘리먼트에서 그하위엘리먼트로 이벤트가 주어진다.

이벤트 버블링(bubbling)

반대로 내부에 엘리먼트부터 이벤트가 일어나는것이 이벤트 버블링이라고 한다. 하위 엘리먼트가 일어나고 그 뒤에 부모 엘리먼트로 이벤트가 일어난다.

위와같은 이벤트 발생순서 (이벤트 전파라고 한다)는 브라우저개발에서 다르게 구현되었다. 후에는 DOM표준에 따르면서 위두가지 모델이모두 사용하게되었고 이벤트 핸들러는 두과정모두에 등록될 수 있다. (이이상은 상세히 설멸할 필요는 없을듯)

이벤트 버블링의 부작용

버블링의 경우 꺼꾸로 이벤트가 인식되기에 문제가 일어난다. 마우스이벤트의경우 div엘리먼트에 연결되어있다고보고 마우스가 div위에있다면 이벤트핸들러가 정상적으로 작동할것이다. 하지만 a엘리먼트위에있다면 먼저 이벤트는 a엘리먼트에서 일어나고 그후 p엘리먼트 그리고 div엘리먼트에서 일어난다 그러면 원하고자했던 이벤트가 아니라  엉뚱한 결과가 나오게 된다.