DOM 객체에 EventListener 등록

 Javascript에서 Load, Interpret, Run 등의 Event를 받아서 처리하기 위해서는 EventListener에 등록을 시켜줘야 합니다. 이 때 사용되는 메소드가 attatchEvent()와 addEventListener()입니다. W3C에서는 addEventListener()를 사용하며 IE에서는 attatchEvent()를 사용합니다.

이 때 주의할 점은 IE에서는 event 이름 앞에 "on"을 붙여주어야 하는 점입니다. 그리고, w3c DOM인 경우 마지막에 받게 되는 파라미터는 이벤트의 발생 순서를 의미합니다.

※ addEvent를 사용하여 handler를 추가하게 되면 호출된 handler에서 this를 호출하게 되면 handler가 속해있는 object가 아니라, element가 호출됩니다. 이를 해결하기 위해서 element의 property에 handler가 속해있는 object의 인스턴스를 넣어주는 것도 하나의 방법입니다.

B element를 포함하고 있는 A element를 가진 웹페이지를 만든다고 가정을 하구요. 두 element 모두 onClick event를 처리하는 function을 가지고 있다고 가정을 합니다. 이 때, 어떤 Element가 이벤트를 먼저 받을까요?

정답은 브라우저와 addEventListener의 마지막 파라미터에 따라 달라집니다. 과거 익스플로러와 넷스케이프간의 브라우저 전쟁이 있었던 무렵에는 두 브라우저의 이벤트 순서는 완전히 달랐습니다.

B element를 클릭했을 경우 익스플로러에서는 B element에서 먼저 이벤트를 받은 다음에 A element으로 이벤트가 발생하게 됩니다. (이를 'Bubbling'이라고 합니다.)

반면에, Netscape에서는 A element가 이벤트를 먼저 받고 그 다음으로 B element에서 이벤트가 발생하게 됩니다. (이를 'Capturing'이라고 합니다.) Netscape 4에서는 Capturing만 지원합니다.

그리고, 이를 해결하기 위해서 w3c에서의 해결책은 addEventListener의 마지막 파라미터의 값에 따라 caturing(true) 또는 bubbling(false)을 처리할 수 있도록하는 해결책을 내놓게 됩니다.

브라우저마다 이벤트 처리방식을 다르게 하지 않을거라면 세번째 파라미터를 true로 사용하는 일은 없겠죠 ^^;;

- event를 설정하는 방법에는 위의 addEventListener()방식을 사용하는 방법 외에도 여러가지가 있습니다.
- 가장 잘 알려진 방식인 element.eventType = callback;으로 설정해주는 방법도 있고 (예: div.onClick = callbackMethod;)
- 또 다른 방법으로 element[elementType] = callback;같이 배열을 이용하는 방법도 있습니다. (예: div[onClick] = callbackMethod;)
- 위의 방법은 모두 똑같습니다.

참고사이트
W3C의 DOC관련 사이트 :
     http://www.w3.org/TR/DOM-Level-2-Events/events.html
Event order :
     http://www.quirksmode.org/js/events_order.html