이벤트 함수에서 e 그리고 window.event 구문 이해하기

자바스크립트의 이벤트가 발생하는 경우 우리는 e 또는 window.event가 사용된 모습을 자주 볼 수있다. 이 두가지 키워드가 어떻게 사용되고 이벤트 안에서 어떤 일이 일어나는지 자세히 알아보고자 한다.

먼저 아래의 코드를 보자. 아래 코드는 일반적인 이벤트 함수를 작성중인 코드로 그 일부분이다. 여기에 클릭 이벤트가 발생하며 특정 구문을 콜백으로 실행하려하는 코드이다.

# 예제소스 보기

여기서 사용된 e 그리고 window.event는 무엇이 다른 것일까? 이 구문이 왜 필요한 것일까? 먼저 이 문법에 대하여 설명하자면 ...

|| 문법은 변수 선언에 있어서 해당하는 값이 있는 경우 앞의 값을 선언하고 없는 경우에는 뒤의 값을 선언하게 된다. 즉, 선언된 e 변수 두의 ||는 크로스 브라우징을 위해 사용된 것으로 이벤트 객체 중 맞는 부분에 사용할 수 있게된다.

e 그리고 window.event는 발생된 이벤트에 대한 정보를 가지고 있다. 그래서 target 프로퍼티등을 활용해 이벤트 대상을 반환할 수 있는 것이다. 중요한건 Internet Explorer의 경우 e가 존재하지 않으므로 대신에 window.event를 필요로하는 것이다.

# 클릭 대상 노드의 선택방법

앞에 언급한 e 그리고 window.event를 이해하면 노드를 가져올 수 있을 것이다. 하지만 객체가 다르듯 프로퍼티도 조금 다른데 아래의 프로퍼티 두 개를 보자.


대상 엘리먼트의 저장의 경우도 이처럼 다르게 사용된다. 이는 아래처럼 사용할 수 있으니 꼭 알아두자.