이벤트 객체

event 객체는 이벤트가 발생할 때 생성되며 이에 대한 정보를 담고 있습니다. 이벤트가 발생하면 event 객체가 핸들러 함수로 전달됩니다.

event 객체의 속성과 메서드

아래 표는 event 객체의 속성과 메서드 및 그 설명을 나타냅니다:

이름	설명
`event.currentTarget`	이벤트 버블링 단계의 현재 DOM 요소입니다. 보통 이 속성은 함수의 `this`와 동일합니다.
`event.data`	선택적 매개변수입니다. 실행 핸들러를 부착할 때 이벤트 메서드에 전달되는 데이터 객체입니다.
`event.delegateTarget`	방금 호출된 jQuery 이벤트 핸들러가 부착된 요소입니다. 이 속성은 핸들러가 처리 대상 요소의 조상에게 바인딩된 위임된 이벤트에서 가장 유용합니다. 요소에 직접 바인딩된 비위임 핸들러의 경우, `event.delegateTarget` 값은 `event.currentTarget` 값과 일치합니다.
`event.isDefaultPrevented`	이 이벤트 객체에 대해 `event.preventDefault` 메서드가 호출되었는지 확인하는 메서드입니다.
`event.isImmediatePropagationStopped`	이 이벤트 객체에 대해 `event.stopImmediatePropagation` 메서드가 호출되었는지 확인하는 메서드입니다.
`event.isPropagationStopped`	이 이벤트 객체에 대해 `event.stopPropagation` 메서드가 호출되었는지 확인하는 메서드입니다.
`event.isPropagationStopped`	이 이벤트 객체에 대해 `event.stopPropagation` 메서드가 호출되었는지 확인하는 메서드입니다.
`event.metaKey`	이벤트 발생 시 `META` 키가 눌렸는지 확인하는 메서드입니다. 플랫폼에 따라 해당 키는 다를 수 있습니다. `true` 또는 `false`를 반환합니다.
`event.namespace`	이벤트 호출 시 지정된 네임스페이스입니다. 이 속성은 사용된 네임스페이스에 따라 달라지는 작업을 하는 플러그인 작성자에게 유용할 수 있습니다.
`event.pageX`	문서의 왼쪽 가장자리 기준 마우스 위치를 나타냅니다.
`event.pageY`	문서의 상단 가장자리 기준 마우스 위치를 나타냅니다.
`event.preventDefault`	이 메서드가 호출되면, 해당 이벤트의 기본 동작이 실행되지 않습니다. 예를 들어, 링크를 클릭해도 새 URL로 이동하지 않습니다. 이 메서드가 호출되었는지 확인하려면 `event.isDefaultPrevented` 메서드를 사용할 수 있습니다.
`event.relatedTarget`	이벤트에 관여하는 다른 DOM 요소가 있다면 반환합니다. `mouseout`의 경우 마우스가 어떤 요소 위에 있는지, `mouseover`의 경우 마우스 커서가 어떤 요소에서 벗어났는지를 나타냅니다.
`event.result`	발생한 이벤트의 핸들러가 반환한 마지막 값으로, `undefined`와 같지 않습니다. 이 속성은 사용자 정의 이벤트의 값을 얻는 데 유용할 수 있습니다.
`event.stopImmediatePropagation`	요소에 연결된 나머지 모든 이벤트 핸들러의 작동을 취소하고 DOM 트리 상위로의 이벤트 버블링을 방지합니다. 조상 요소로의 이벤트 버블링만 막고 다른 이벤트 핸들러의 작동은 허용하려면 `event.stopPropagation` 메서드를 사용할 수 있습니다. 이 이벤트 객체에 대해 `event.stopImmediatePropagation`가 호출되었는지 확인하려면 `event.isImmediatePropagationStopped` 메서드를 사용하십시오.
`event.stopPropagation`	DOM 트리 상위로의 이벤트 버블링을 방지합니다. 다른 핸들러들은 이 요소에 대해 계속 작동한다는 점을 기억하십시오. 이 메서드는 `trigger` 메서드를 사용하여 호출된 사용자 정의 이벤트에도 작동합니다. 이 메서드가 호출되었는지 확인하려면 `event.isPropagationStopped`를 사용하십시오.
`event.target`	이벤트를 시작한 DOM 요소입니다. 이는 이벤트에 등록된 요소 또는 그 자손일 수 있습니다. `event.target`와 `this`를 비교하여 이벤트 버블링을 판단하는 데 매우 유용합니다. 이벤트가 버블링될 때 이벤트를 위임하는 데 유용한 속성입니다.
`event.timeStamp`	브라우저가 이벤트를 생성한 시점과 1970년 1월 1일 사이의 시간 차이(밀리초)입니다. 이 속성은 코드 내 두 시점에 대한 `event.timeStamp` 값의 차이를 구하여 이벤트 성능을 판단하는 데 유용할 수 있습니다. 이벤트 핸들러 내에서 현재 시간만 얻으려면 `getTime` 메서드를 사용하십시오.
`event.type`	이 속성에는 이벤트 유형이 지정됩니다.
`event.which`	이 속성은 키보드 또는 마우스의 어떤 버튼이 눌렸는지를 나타냅니다. 마우스의 경우: `1` - 왼쪽 버튼, `2` - 휠, `3` - 오른쪽 버튼. `event.button` 대신 `event.which`를 사용하십시오.

event 객체의 다른 속성들

event 객체에 복사되는 다른 속성들도 있습니다:

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view.

위에 열거되지 않은 속성에 접근하려면 event.originalEvent 객체를 사용할 수 있습니다.

예제

어떤 키가 눌렸는지를 div에 출력해 봅시다:

<input id="test" value="무언가 입력하세요">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

예제

어떤 태그를 클릭하는지를 div에 출력해 봅시다:

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>클릭</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('클릭됨: ' + event.target.nodeName);
});

함께 보기

요소에 이벤트 핸들러를 바인딩할 수 있는 메서드 on
요소에 바인딩된 지정된 유형의 이벤트에 대한 모든 핸들러를 실행할 수 있는 메서드 trigger
요소에 바인딩된 모든 이벤트 핸들러를 실행할 수 있는 메서드 triggerHandler
jQuery 이벤트