브라우저별 event 정리

브라우저에서 event란 무엇인가?
화면을 통해 사용자가 발생하는 action을 event라고 정의해보면 event는 키보드입력, 마우스입력, 마우스이동 등이 있을것이다.
문제는 브라우저별로 event를 사용하는 방법이 다르다는 것이다. 그러다보니 event의 정확한 사용법을 알고 싶어 정리를 하게 되었다. W3C DOM이벤트의 정의는 다음 사이트에 잘 정의되어 있다.
W3C DOM Compatibility - Events
내용을 살펴보면,
1. 이벤트의 대상이 되는 Target에 대한 정의
2. 마우스의 위치에 대한 정의
3. 키보드에 대한 정의
4. 그외 잡다한 정의(버튼, 시간흐름 등등..)
5. 이벤트 핸들러등록에 대한 정의
등을 정리하고 있다.

이 중 몇가지를 살펴보면,
1. 이벤트 대상인 Target에서 주로 사용되는 property인 target과 srcElement에 대해 살펴보자
target은 IE(Internet Explore)계열에서는 지원되지 않고 FF(FireFox) 계열에서 지원된다.
정의는 다음과 같은데
--------------------------------------
The target property refers to the HTML element the event actually took place on, even when the event handler has been registered not on the HTML element but on one of its ancestors.
: target property는 이벤트핸들러가 html element에 등록되지 않고 그 상위에 등록되더라도 이벤트가 실제로 발생하는 HTML element를 보여준다.
--------------------------------------
IE에서는 srcElement가 target과 같은 방법으로 사용되고 있다.
나머지는 사용할 때마다 정리하겠다.
.....

Event properties블로그에서는 위에서 살펴본 이벤트의 정의에 대한 실사용방법에 대해 설명하고 있다.
여기서는 다음의 5가지 확인사항을 통해 이벤트에 대해 쉽게 접근하고 있다.

1. 이벤트의 type은 무엇인가?
2. 어떤 HTML element가 이벤트의 target 인가?
3. 어떤 키가 이벤트로 눌려졌는가?
4. 어떤 마우스 버튼이 이벤트로 눌렸는가?
5. 이벤트가 일어난 마우스 위치는 어디인가?

1. 이벤트 type이 무엇인가?
발생하는 이벤트의 type을 확인할 수 있다. IE와 FF계열에서 사용할 수 있도록 처리후에 코드를 확인해 보자
function connectTest1(e) { if (!e) var e = window.event; alert(e.type); } ---- <input id="connectBtn" type="button" value="js연결확인" onclick="connectTest1(event);"></input>
버튼을 실행하면 "click"이라는 결과값이 나온다. if (!e) var e = window.event;를 통해 FF에서 지원하는 event 값이 참이 아니면 window.event값을 이벤트 값으로 사용하게 하여 두 종류의 브라우져를 지원하게 되었다. 이처럼 type property를 통해 이벤트의 이름을 알 수 있다.

2. 어떤 HTML element가 이벤트의 target 인가?
이벤트의 target을 찾는다. 이는 위에서 설명했던것 처럼 이벤트가 발생되는 HTML Element를 반환하는 것인데...(어디에서 사용되는지 아직 잘 모르겠다-_-)
소스를 참조해 보면


function doSomething(e) { var targ; if (!e) var e = window.event; if (e.target) targ = e.target; else if (e.srcElement) targ = e.srcElement; if (targ.nodeType == 3) // defeat Safari bug targ = targ.parentNode; }

nodeType부분은 SafariBrowser부분이라 자세한 설명은 생략한다. FF계열에서는 target을 이용하여 값을 찾을수 있고 IE계열에서는 srcElemet를 사용해서 값을 가져올수 있다.

3. 어떤 키가 이벤트로 눌렸는가?
이는 위에 키보드에 대한 정의에서 각 브라우저별 지원되는 property를 사용하면 된다. 우선 소스를 보면

function doSomething(e) { var code; if (!e) var e = window.event; if (e.keyCode) code = e.keyCode; else if (e.which) code = e.which; var character = String.fromCharCode(code); alert('Character was ' + character); } --------- document.onkeypress = doSomething;

이렇게 적용하면 눌려지는 키를 화면에 보여주는데 여기서는 String.fromCharCode()라는 메소드를 사용하여 keyCode값이 반환해주는 문자 코드 값을 실제 character 값으로 보여주고 있다.
더 자세한 설명은 keystrocks블로그에서 확인할 수 있는데 keyCode 는 IE에서 유효하며, FF에서는 키보드나 마우스에 대해 which라는 property가 유효하다. 물론 keyCode가 FF에서도 에러가 나지는 않으나 keypress event에 대해서는 항상 "0"값을 리턴한다.
--------------------------------------------------------------------
좀더 자세히 살펴보자.
keydown/up이벤트와 keypress이벤트는 구분되어 브라우저에서 지원되는데
실제로 키보드에서 눌려진(대소문자 구분이 없다) Key의 Code값과 눌려진 키의 ascii값을 반환해주는 case가 있다. 정리를 해보면,
keyCode property에서는
keydown/up 이벤트에서는 모든 브라우저에서 Key Code값을 반환한다.
keypress 이벤트에서는 FF에서는 "0"을 반환하고 나머지 브라우저에서는 키의 ascii값을 반환한다.

charCode property에서는
keydown/up 이벤트에서는 IE는 지원을 하지 않으며 FF에서는 Key의 Code값을 반환한다.
keypress 이벤트에서는 IE는 지원하지 않으며 FF에서는 ASCII값을 반환한다.
--------------------------------------------------------------------


4. 어떤 마우스 버튼이 이벤트로 눌렸는가?
여기서는 which(FF)와 button(IE)이라는 property가 사용된다.
FF에서는 버튼이벤트 값은 다음과 같다(이 부분은 참조사이트에 오류가 있어서 수정

• Left button – 1
  
• Middle button – 2
  
• Right button – 3

IE에서는 다음과 같다

• Left button – 1
• Middle button – 4
• Right button – 2

//마우스우클릭 확인 function doSomething(e) { var rightclick; if (!e) var e = window.event; if (e.which) rightclick = (e.which == 3); else if (e.button) rightclick = (e.button == 2); alert('Rightclick: ' + rightclick); // true or false } 5. 이벤트가 일어난 마우스 위치는 어디인가?
//마우스위치 확인 function doSomething(e) { var posx = 0; var posy = 0; if (!e) var e = window.event; if (e.pageX || e.pageY) { posx = e.pageX; posy = e.pageY; } else if (e.clientX || e.clientY) { posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; } // posx and posy contain the mouse position relative to the document // Do something with this information }
또한 같은 요령으로 IE에서 사용되는 property와 FF계열에서 사용되는 property를 확인하면서 적용하면 된다.