날씨가 좀잡을 수 없을 정도로 오락가락 하고 있네요…
밥 먹으러 나갔다 오는게 업무보다 힘들어지는 더위가 찾아오고 있어요.. 큰일입니다. ㅠ
javascript 로 이벤트 핸들링을 하다보면 종종 내가 정한 범위를 넘어서 이벤트가 발생되는 경우를 만나곤 합니다.
위 예제 처럼 파란박스 위에 빨간박스가 겹쳐있을 때 아래와 같이 이벤트를 설정하게 되면
|
1 2 3 4 5 6 |
document.getElementById("a").onclick = clicked; document.getElementById("b").onclick = clicked; function clicked(event) { console.log("clicked"); } |
빨간박스를 클릭했을 때의 이벤트가 파란박스에도 영향이 미쳐 “clicked” 라는 메세지가 두번 노출되게 되는데 이것을 이벤트 버블링 이라고 합니다.
(테스트 – http://jsfiddle.net/rootbox/uGJnj/1/)
이런 경우 이벤트의 버블링을 제한해주어야 하는데 DOM 표준과 비 표준에 따라 방식이 나뉘어 집니다.
DOM 표준의 경우 stopPropagation(); 을 사용하고,
비 표준의 경우 cancelButtle = true; 를 사용합니다.
위 예제 코드를
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
document.getElementById("a").onclick = clicked; document.getElementById("b").onclick = clicked; function clicked(event) { var event = event || window.event; if(event.stopPropagation) { event.stopPropagation(); } else { event.cancleBubble = true; } document.getElementById("log").value += "clickedn"; } |
위와 같이 수정하면 이벤트 버블링은 발생하지 않게 됩니다.
실행 테스트 – 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
이벤트 버블링 어디서 많이 들어봤다 했더니만 Objectiv-C 스터디하면서 아이폰 관련 GUI메세지 전달 관련 챕터에서 잠깐 언급이 되었던 얘기군요
저도 obj-c 를 쪼금 본적이 있긴한데 기억이 없..;; 책은 왜 산거지ㅠ
이벤트 버블링 찾다 네 포스팅을 보았다;;
근데 모르겠다;; ㅠㅠ 나 설명좀 ㅠㅠ
제가 뭘 안다고 서..설명을..
앜 T^T 이벤트 버블링을 검색해보니 이포스트가 검색이 되는군요…..
이걸 몰라서 다른 사람앞에서 얼마나 난감했는지….
이거 분명히 읽었던 기억이 나는데 그때는 왜 기억을 못하고 있었던거지 흑 ㅠ.ㅠ
첫 댓글 달았었는데 그걸 잊으셨나요.. ㄷㄷ