event 객체의 프로퍼티 및 메서드

이벤트 발생시 콜백함수로 넘어오는 event 객체

이벤트가 발생되면 이벤트에 매개변수로 넘긴콜백함수가 호출되는데, 이때 매개변수로 event 객체를 넘겨줍니다.

이 event 객체의 프로퍼티에는 이벤트 발생 시 얻을 수 있는 정보가 들어 있으며 이벤트 모델의 전파 과정을 컨트롤할 수 있는 메서드와 브라우저의 기본 동작이 발생하지 않도록 하는 메서드가 포함되어 있습니다.

Event Object

다음은 event 객체가 넘어오고 프로퍼티와 메서드를 사용한 예입니다.

javascript

$('selector').on('eventType', function (event) {
    event.property; // 이벤트 객체의 프로퍼티 값 얻어오기
    event.method(); // 이벤트 객체의 메서드 호출하기
})

다음은 자주 사용하는 event 객체의 프로퍼티 속성과 메서드를 정리한 표입니다.

event 객체의 프로퍼티

프로퍼티	설 명
altKey	이벤트 발생 시 alt 키를 누르고 있었는지 여부를 boolean 값으로 알려줍니다. 누르고 있었다면 true 값을 누르고 있지 않았다면 false 값으로 설정되어 있습니다.
shiftKey	이벤트 발생 시 shift 키를 누르고 있었는지를 boolean 값으로 알려줍니다. 누르고 있었다면 true 값을 누르고 있지 않았다면 false 값으로 설정되어 있습니다.
ctrlKey	이벤트 발생 시 ctrl 키를 누르고 있었는지 여부를 boolean 값으로 알려줍니다. 누르고 있었다면 true 값을 누르고 있지 않았다면 false 값으로 설정되어 있다.
keyCode	이벤트 발생시 키보드의 키를 누르면 키의 고유값을 알려준다.
clientX	document 에서 스크롤 이동값을 제외하고 마우스의 x 좌표 값을 알려준다.
clientY	document 에서 스크롤 이동값을 제외하고 마우스의 y 좌표 값을 알려준다.
offsetX	이벤트 발생 시 이벤트 대상으로부터 마우스의 x 좌표를 알려준다.
offsetY	이벤트 발생 시 이벤트 대상으로부터 마우스의 y 좌표를 알려준다.
pageX	document 에서 스크롤 이동값을 포함한 마우스의 x 좌표 값을 알려준다.
pageY	document 에서 스크롤 이동값을 포함한 마우스의 y 좌표 값을 알려준다.
screenX	모니터 화면을 기준으로 마우스의 x 좌표 값을 알려준다.
screenY	모니터 화면을 기준으로 마우스의 y 좌표 값을 알려준다.
data	이벤트 생성 시 매개변수 두 번째에 값을 넘겨주면 event 의 프로퍼티를 통해서 전달된다.
target	이벤트가 발생한 엘리멘트를 알려준다.
type	발생한 이벤트의 타입명을 알려준다.

event 객체의 메서드

method	description
preventDefault()	브라우저의 기본 동작을 차단한다.
stopPropagation()	이벤트의 버블링 단계가 진행되지 않도록 차단한다.

Jaehee's WebClub