[IE Event] 이벤트를 감지하는 순서

<table>

    <tr>

        <td> 하하하 </td>

    </tr>

</table>

 

위와 같은 태그가 있고 table 태그에 onClick 이라는 이벤트가 걸려있고

그것을 event객체의 srcElement로 이벤트가 발생한 태그를 찾으면 table 태그가 나오는 것이 아니라,

 

발생한 지점에서의 태그가 나온다.

 

만약 "하하하" 가 있는 지점을 찍었다면 그 태그는 table이 아니라 "하하하" 라는 텍스트 노드가 된다.

 

이것을 버블링이라고 하는데... IE 6.0까지 버블링만 지원된다.

 

1. 이벤트의 캡쳐 방식

 

   1) capture

 

      캡쳐 순서 : window -> document -> table -> tr -> td -> 하하하

 

   2) bubbling

 

      캡쳐 순서 : 하하하 -> td -> tr -> table -> document -> window

 

2. IE에서 이벤트 발생한 객체 얻어오기

 

   window.event.srcElement

 

   하면 현재 발생한 이벤트에 해당하는 객체를 리턴해주는데...

   위와 같은 상황에서는 "하하하" 를 돌려준다.

   왜냐하면 IE는 bubbling 만을 지원하기 때문에 젤 먼저 발생한 요소를 리턴하기 때문이다.

 

  아마 IE 7.0 부터는 Capture도 지원하지 않을까 한다.

 

3. 사용예

 

<table onMouseDown="test();">

    <tr>

        <td> 하하하 </td>

    </tr>

</table>

<script>

function test()

{

    alert(event.srcElement.innerHTML);

}

</script>

 

결과

 

 

4. 문제점

   1) "하하하" 라는 것은 우리가 원하는 요소가 아니다.

   2) 우리는 table 태그가 click 되기를 원했다.

 

5. 문제 해결 방법

   1) html은 javascript로 DOM 형태의 액세스가 가능하다.

   2) 그중에서 상위 태그를 찾는 방법은 element.parentNode 라는 속성을 사용해서 상위 태그를 찾아갈 수 있다.

 

   3) 그렇다면 우리가 원하는 상위 태그는 어디일까?

       만약 테이블 태그에만 id가 주어져 있다면

       

       e = event.srcElement;

       while(e.id == "") {

          e = e.parentNode;

       }

 

       id가 있는지 체크를 해서 없으면 상위 노드로 이동한다. 그리고 다시 있는지 체크해서 실제 id를 가진 태그를 저장한다.

 

       alert(e.id)

 

       하면 table에 지정된 id 속성 값이 나올 것이다..

 

   4) 단지 태그만 알고 가고싶다는 경우는 어떻게 하면 될까?  

 

       e = event.srcElement;

       while(e.tagName != "table") {

          e = e.parentNode;

       }

 

      tagName이라는 속성을 이용하여 현재 태그의 이름을 얻어와서 table인지 아닌지 확인하고 저장한다.

      최종적으로는 table 태그가 저장이 될 것이다.

 

     alert(e.tagName)

    

     하면 최종 얻어온 태그의 태그 이름을 얻을  수 있다.