[WEB] JS Event

[원글 - 2012년 이글루스]

예전에는 대부분 IE 6.0을 사용하였지만

사용자 인식의 변화와 모바일 환경의 확대 윈도우 7 보급 확대 등으로 인하여

이제는 크롬, 사파리, 파이어 폭스, IE 8 이상 등의 다양한 브라우져가 사용되고 있다

IE6.0이 절대적인 지지를 받던 시절에는 표준을 무시해서라도 IE6.0에 맞도록 웹페이지를 작성하면 되었지만

이제는 표준을 가급적 지키면서 가능한 모든 브라우저에서 동일한 결과를 얻을 수 있도록 하는 것이 중요해졌다

이번 글에서 소개할 내용은 크로스 웹 브라우져에서 javascript 이벤트 처리에 관련된 내용이다

===========================================================================================

javascript 이벤트가 발생하면 event객체가 생기고

우리는 해당 event객체를 통해서 어떤 event가 발생했고, 해당 event의 parameter 값을 얻어 올 수 있다

기본적으로 IE계열이나 Webkit (사파리, 크롬) 계열에서는 굳이 event 객체를 함수의 패러미터로 넘겨주지 않아도

event 발생 시 호출 함수에서 언제든지 window.event로 접근 할 수 있다

하지만 Firefox 계열의 경우, 반드시 호출 시 함수 패러미터로 event 객체를 넘겨 주어야만 한다

호출 시 함수 패러미터로 event 객체를 넘겨 주는 방법은 Firefox뿐만 아니라 대부분의 브라우져가 지원하기 때문에

일반적인 경우에는 event 객체를 패러미터로 넘기는 방법으로 스크립트를 작성하면 된다

가령, text field에서 키입력을 받아서 어떤 키가 눌렸는지 체크하는 함수를 만든다고 해보자

일반적으로 표준으로 제시되는 방식은 아래와 같다

<input type="text" onkeydown="displayResult()" />
function displayResult()
{
    var x;
    if (  event.which ) // IE9 / Firefox / Chrome / Opera / Safari
    {
	    x = event.which;
    }
    else if ( window.event ) // IE8 and earlier
    {
      	    x = event.keyCode;
    }
    
    var keychar = String.fromCharCode(x);
    alert( "Key " + keychar + " was pressed down" );
}

( 코드 출처 : w3schools : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onkeydown )

하지만 위의 방식은 fire fox에서는 돌아가지 않는다

fire fox에서 돌아가게 하려면 아래와 같이 수정해야 한다

<input type="text" onkeydown="displayResult( event )" />
function displayResult( e )
{
    var x;
  
    if ( e.which ) // IE9/Firefox/Chrome/Opera/Safari
    {
        x =e.which;
    }
    else if ( window.event ) // IE8 and earlier
    {
        x = event.keyCode;
    }
    
    var keychar = String.fromCharCode(x);
    alert( "Key " + keychar + " was pressed down" );
}

아래의 방식대로 모든 브라우져에서 돌아간다면 그냥 아래의 방식으로 하면 되지 않는가???

반은 맞는 말이고 반은 틀린 말이다

정적인 페이지에서는 위의 방식대로 처리하면 되지만

최근 많은 웹페이지들은 동적인 페이지로 바뀌는 추세다

특히 Ajax를 이용하여 동적인 웹사이트를 만들 경우에는 어떻게 할 것인가?

만일 DOM 객체 ( <input>, <img> 등의 노드들 ) 를 동적으로 생성하고

이들에게 동적으로 이벤트를 주고자 하면 어떻게 되겠는가

그 때는 event 객체를 패러미터로 넘겨주는 방법을 사용하기 어려워진다

Firefox 하나의 문제로 기존 표준으로 제시 된 방법을 사용하지 않는 것도 조금 그런 상황이다

문제는 Firefox만 해결하면 된다는 점인데

다행히도 window의 Event 리스너를 통해서 이 문제를 해결할 수 있다

Firefox 계열의 브라우저인 경우, 해당 이벤트가 발생할 경우

window.event에 해당 event객체를 자동으로 할당하도록 Event 리스너에 등록하는 방법이다

코드는 아래와 같다

/* Register Event Listener For FireFox */
if( navigator.userAgent.indexOf('Firefox') >= 0 ) {
    var eventNames = ["mousedown", "mouseover", "mouseout", 
                      "mousemove", "mousedrag", "click", "dblclick",
                      "keydown", "keypress", "keyup" ]; 

    for( var i = 0 ; i < eventNames.length; i++ ) {
        window.addEventListener( eventNames[i], function(e) {
            window.event = e;
        }, true );
    }
}

eventNames 는 Javascript Event에 정의되어 있는 이벤트 이름이다

아래 사이트를 참조하길 바란다

http://www.w3schools.com/jsref/dom_obj_event.asp

위 코드는 마우스 이벤트와 키보드 이벤트를 등록한 상태이다

이제 제일 처음에 작성했던 function displayResult() 방식 만으로도 Event 처리가 잘 동작할 것이다