오늘 간만에 JavaScript를 사용하다..
다시한번 빠져든 이야기..
다음과 같은 태그로 구성된 document가 있다고 하자..
<table onclick="go(1);">
<tr>
<td><span onclick="go(2);">메롱메롱</span></td>
</tr>
</table>
<tr>
<td><span onclick="go(2);">메롱메롱</span></td>
</tr>
</table>
여기서,
내가 기대한 동작은..
span태그가 감싸고 있는 부분(메롱메롱)을 누르게 되면
go함수에 2를 전달하게 되고,
기타 테이블의 다른 영역을 클릭하게 되면, go함수에 1을 전달하는 시나리오였다..
그런데..
span태그가 감싸고 있는 부분을 아무리 누질러도.. go함수에 죽어라 1만 전달됐다..
(하여튼 JavaScript로 무언가 하고자 하면.. 한번에 안된다..ㅡ,.ㅡ;;)
이제부터 해결과정 :
DOM 이벤트 모델의 특징중..
Capture Step, Bubbling Step이란 말이 있는데..
쉽게 말해서, 하나의 이벤트가 이벤트 소스를 기준으로 parent로 전달되는 것을 말한다.
capture step는 child에서 parent로 전달..
bubbling step는 parent에서 child로 전달..
표준을 따르자면..
capture step, bubbling step이 순서대로 진행되어야 하지만..
우리 IE군은 capture step따위는 무시해주신다..
따라서,
이 문제는 bubbling step에 따라서 Table에 걸린 onclick 이벤트가 실행된건데..
이 과정을 없애기 위한 명령이..
event.cancelBubblue = true 이다.
말그대로.. bubble를 취소해준다..ㅋ;
PS. 이래서 낵아 자바 스크립트를 매우 좋아(?)한다..ㅡ,.ㅡ;;
락군
