블로그 내 검색

2011. 10. 7.

자바스크립트 이벤트 객체 정규화

자바스크립트에서 이벤트 객체를 다루기란 좀 귀찮은 작업이다
W3C 표준 구현 브라우저들과, IE가 완전 다르거든~ 구현된 방법이 다르기 때문이다.

따라서 이벤트 객체를 활용한 작업들(주로 마우스와 키보드 이벤트 관련)에 대해 크로스 브라우징을 하기 위해서는 이벤트 객체를 한번 정규화 할 필요가 있다.

다음과 같다.

var genaralizeEvent = function(evt) {
    if(!evt) {
        evt = window.event;
        evt.target = evt.srcElement;
        evt.preventDefault = genaralizeEvent.preventDefault;
        evt.stopPropagation = genaralizeEvent.stopPropagation;
    }
    return evt;
}
genaralizeEvent.preventDefault = function() { 
    this.returnValue = false; 
}
genaralizeEvent.stopPropagation = function() { 
    this.cancelBubble = true; 
}

IE 모델에서 빠진 것을 추가하고 혼돈이 올 속성을 추가했다.

위 메서드로 구현한 마우스(onmousemove) 이벤트 감시
위 구현에 사용된 소스.
var mt = document.getElementById("input_mouse_trace");
window.onload = function() {
    var genaralizeEvent = function(evt) {
        if(!evt) {
            evt = window.event;
            evt.target = evt.srcElement;
            evt.pageX = evt.clientX + (document.body.scrollLeft);
            evt.pageY = evt.clientY + (document.body.scrollTop);
            evt.preventDefault = genaralizeEvent.preventDefault;
            evt.stopPropagation = genaralizeEvent.stopPropagation;
        }
        return evt;
    }
    genaralizeEvent.preventDefault = function() { 
        this.returnValue = false; 
    }
    genaralizeEvent.stopPropagation = function() { 
        this.cancelBubble = true; 
    }
    var checkMousePosition = function(e) {
    try {
        var event = genaralizeEvent(e);
        mt.value = "";
        mt.value = 
             "[target]: " + event.target.tagName + " / " +
             "[type]: " + event.type + " / " +
             "[x]: " + event.pageX + " / " +
             "[y]: " + event.pageY;    
    }
    catch(e) {}
    };
    document.getElementById("content").onmousemove = checkMousePosition;
}