Cross Browsing : Event 객체

'target'에 해당되는 글 1건

2007/09/29 Cross Browsing : Event 객체

Cross Browsing : Event 객체

Computer/Programming 2007/09/29 10:01

IE와 비 IE 브라우저는 이벤트가 발생했을 때 이벤트에 대한 세부정보를 담고 있는 event 객체를 사용하는 방법에 있어서 많은 차이를 보인다. 가장 먼저, 그 전달 방법부터가 다르다. 다음은 브라우저 별 event 객체의 전달 방법을 나타내었다.

obj의 onclick 이벤트에 process() 함수를 할당

IE의 경우

function process()
{
        alert(event.srcElement.getAttribute("id"));
}

<div id="obj" onclick="process();"/>

비 IE 브라우저의 경우

function process(e)
{
        alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>

event 객체를 사용하는 방법이 다를 뿐만 아니라 event 객체의 속성 중 이벤트가 발생한 객체를 나타내는 속성의 이름도 각각 srcElement와 target으로 다르다. 이외에도 많은 속성 이름이 호환되지 않기 때문에 주의를 요한다.

따라서 IE와 비 IE 브라우저 모두에서 작동하는 코드를 작성하기 위해서는 다음과 같이 한다.

IE 및 비 IE 브라우저 모두에서 작동하는 소스

function process(e)
{
        if(event) alert(event.srcElement.getAttribute("id"));
        else alert(e.target.getAttribute("id"));
}

<div id="obj" onclick="process(event);"/>