이벤트 기본개념 / 이벤트 리스너 / 이벤트 구하구 이벤트 대상 찾기, onload > script

#-- 이벤트 기본개념 ----

var btn = document.getElementById('btn1');

btn.onclick = doProcess;

btn.onclick = doClick;

위와 같은 경우 onclick에 연속해서 두 개의 함수를 할당했는데, 이경우 마지막에 지정한 doClick함수가 실행되고 먼저 지정했든

doProcess는 실행되지 않는다.

#-- 이벤트 리스너의 방식 처리 방법 ----

파이어 폭스는

var btn = document.getElementById('btn1');

btn.addEventListener("click", doProcess, false); // 3번째 인자값은 capture

btn.addEventListener("click", doClick, false);

IE의 경우 addEvendLIstener 함수를 제공하지 않고 대신 attchEvent 함수를 제공하고 있다.

var btn = document.getElementById('btn1');

btn.attachEvent("onclick", doProcess);

btn.attachEvent("onclick", doClick);

==> IE와 파이어폭스의 다른점은

         1. addEventListener 함수는 이벤트 이름만 사용하는 반면 attachEvent함수는 'on'과 이벤트 이름을 붙여서 사용

         2. addEventListener 함수는 캡쳐 단계에 관한 파라미터 존재

@ 이벤트 리스너 관련 모듈 만들어보기

ajax.Event = {};
ajax.Event.addLIstener = function(element, name, observer, useCapture) {
    useCapture = useCapture || false;

    if ( element.addEventListener ) {
        element.addEventListener(name, observer, useCapture);
    } else if ( element.attchEvent) {
        element.attchEvent('on' + name, observer);
    }

ajax.Event.removeListener = function(element, name, observer, useCapture) {
    useCapture = useCapture || false;

    if ( element.removeEventListener ) {
        element.removeEventListener(name, observer, useCapture);
    } else if ( element.detachEvent) {
        element.detachEvent('on' + name, observer);
    }

  # 사용하기 : ajax.Event.addListener(btn, "click", processClick);  // 버튼에 대한 이벤트 리스너 등록

 #-- 이벤트 대상 구하기 ----

function doClick(e) {

    var event = window.event || e;

    ...... // event 사용하여 정보 추출

}

위 코드를 사용하면 window.event가 존재할 경우 window.event가 event 변수에 할당되고, 인자로 e를 전달받은 경우에는

e가 event 변수에 할당된다.

이벤트 대상을 구할 때는 이벤트 객체의 target 프로퍼티나 srcElement 프로퍼티를 사용 srcElement는 구버젼일때 사용.

  @ 모듈 만들기

  ajax.Event.getTarget = function(event) {
    if (event == null) retnru null;
    if (event.target) return event.target;
    else if (event.srcElement) return event.srcElement;
    return null;
}

예 :

function processClick(e) {

  var event = window.event || e;

  var target = ajax.Event.getTarget(event);

  document.write("이벤트 대상 : " + target.nodeName);   //  INPUT

  document.write("대상의 ID : " + target.id);                 // btn

  document.write("이벤트 타입 : " + event.type);            // click