[js] 이벤트 버블링

날씨가 좀잡을 수 없을 정도로 오락가락 하고 있네요…
밥 먹으러 나갔다 오는게 업무보다 힘들어지는 더위가 찾아오고 있어요.. 큰일입니다. ㅠ

javascript 로 이벤트 핸들링을 하다보면 종종 내가 정한 범위를 넘어서 이벤트가 발생되는 경우를 만나곤 합니다.

위 예제 처럼 파란박스 위에 빨간박스가 겹쳐있을 때 아래와 같이 이벤트를 설정하게 되면

빨간박스를 클릭했을 때의 이벤트가 파란박스에도 영향이 미쳐 “clicked” 라는 메세지가 두번 노출되게 되는데 이것을 이벤트 버블링 이라고 합니다.
(테스트 – http://jsfiddle.net/rootbox/uGJnj/1/)

이런 경우 이벤트의 버블링을 제한해주어야 하는데 DOM 표준과 비 표준에 따라 방식이 나뉘어 집니다.

DOM 표준의 경우 stopPropagation(); 을 사용하고,
비 표준의 경우 cancelButtle = true; 를 사용합니다.

위 예제 코드를

위와 같이 수정하면 이벤트 버블링은 발생하지 않게 됩니다.

실행 테스트 – http://jsfiddle.net/rootbox/uGJnj/

DOM – http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-stopPropagation
MSDN – http://msdn.microsoft.com/ko-kr/ms533545

6 comments on “[js] 이벤트 버블링”:

  1. 이벤트 버블링 어디서 많이 들어봤다 했더니만 Objectiv-C 스터디하면서 아이폰 관련 GUI메세지 전달 관련 챕터에서 잠깐 언급이 되었던 얘기군요

  2. 이벤트 버블링 찾다 네 포스팅을 보았다;;
    근데 모르겠다;; ㅠㅠ 나 설명좀 ㅠㅠ

  3. 앜 T^T 이벤트 버블링을 검색해보니 이포스트가 검색이 되는군요…..
    이걸 몰라서 다른 사람앞에서 얼마나 난감했는지….
    이거 분명히 읽었던 기억이 나는데 그때는 왜 기억을 못하고 있었던거지 흑 ㅠ.ㅠ

Leave a Reply

Your email address will not be published. Required fields are marked *