DOM 레벨 0의 이벤트 핸들러
1. 동일한 객체의 동일한 이벤트에 대해 여러 개의 이벤트 핸들러를 지정하더라도 마지막으로 지정한 함수만 유효하다.
2. 모든 브라우저에서는 인라인 이벤트 처리 방식을 지원하지만 가급적 사용하지 않는 것이 좋다.
3. 이벤트 처리 함수에서 false를 반환하면 기본 처리 방법이 실행되지 않는다.

이벤트 객체
1. Event 객체는 모든 이벤트와 관련이 있다.
    - IE에서는 Event가 window 객체의 property이다.
2. 여러 브라우저에서 공통으로 사용 가능한 Event property
    - altKey, clientX, clientY, ctrlKey, keyCode, screenX, screenY, shiftKey, type
3. 기능은 같지만 브라우저 마다 다른 Event property
    - IE: fromElement, toElement
      NE: relatedTarget, currentTarget
    - IE: srcElement
      NE: target
4. cross browser
    - var src = theEvent.target ? theEvent.target : theEvent.srcElement;


이벤트 버블링
1. 여러 개의 중첩되는 엘리먼트(페이지에서 동일한 위치를 차지하는 객체들의 집합)에 이벤트 발생 시 이벤트가 쌓여있는 엘리먼트의 맨 위에서부터 아래로 전달된다.
2. 이벤트 중간에 해당 이벤트 버블링을 취소할 경우
    - IE: cancelBubble -> (boolean)
      NE: stopPropagation -> (function)
    function stopEvent(e) {
        if(e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    }



DOM 레벨 2의 이벤트 모델
1. 특정 이벤트 핸들러 property에 의존적이지 않다.
    - 하나의 이벤트나 객체에 다수의 이벤트 핸들러를 등록시킬 수 있다.
2. 메소드
    - addEventListener, removeEventListener, dispatchEvent
    - IE: attachEvent, detachEvent
3. addEventListener 구문형식
    - obj.addEventListener('evnet', eventFunction, boolean)
        세 번째 인자는 이벤트 처리 방식이다. false면 bubble-up, true면 cascade-down
4. IE에서 고려해야 할 사항
    - 각 이벤트 핸들러마다 메모리가 할당된다. 따라서 unload 이벤트를 캡처하여 detachEvent로 설정된 이벤트를 제거해야 한다.

신고
Posted by Rhio.kim