Event object

The event object is generated when an event is triggered and contains information about it. When an event occurs, the event object is passed to the handler function.

Properties and methods of the event object

The table below lists the properties and methods of the event object and their descriptions:

Name	Description
`event.currentTarget`	The current DOM element at the event bubbling stage. This property is usually equivalent to the `this` function.
`event.data`	Optional parameter. A data object passed to the event method when attaching an executable handler.
`event.delegateTarget`	The element to which the jQuery event handler that was just called was attached. This property is most useful on delegated events, where the handler is bound to an ancestor of the element being handled. For non-delegated handlers bound directly to an element, the value `event.delegateTarget` corresponds to the value `event.currentTarget`.
`event.isDefaultPrevented`	The method checks whether the `event.preventDefault` method has been called for this event object.
`event.isImmediatePropagationStopped`	The method checks whether the `event.stopImmediatePropagation` method has been called on this event object.
`event.isPropagationStopped`	The method checks whether the `event.stopPropagation` method has been called on this event object.
`event.isPropagationStopped`	The method checks whether the `event.stopPropagation` method has been called on this event object.
`event.metaKey`	The method checks whether the `META` key was pressed when the event was triggered. The key may differ depending on the platform. Returns `true` or `false`.
`event.namespace`	The namespace specified when the event was called. This property will be useful for plugin authors whose tasks depend on the namespace used.
`event.pageX`	Shows the mouse position relative to the left edge of the document.
`event.pageY`	Shows the mouse position relative to the top edge of the document.
`event.preventDefault`	If this method is called, the default action for this event will not be performed. For example, clicking on a link will not lead to a new URL. To check whether this method was called, you can use the `event.isDefaultPrevented` method.
`event.relatedTarget`	Returns the other DOM element participating in the event, if any. For `mouseout` it shows which element the mouse is hovering over, for `mouseover` it shows which element the mouse was moved away from.
`event.result`	The last value returned by the event handler that triggered the event was not equal to `undefined`. This property can be useful for retrieving values of your own events.
`event.stopImmediatePropagation`	Stops all remaining event handlers associated with the element and prevents the event from propagating up the DOM tree. To simply stop an event from propagating to ancestor elements but allow other event handlers to propagate, you can use the `event.stopPropagation` method. Use the `event.isImmediatePropagationStopped` method to check whether `event.stopImmediatePropagation` has been called on a given event object.
`event.stopPropagation`	Prevents the event from bubbling up the DOM tree. Keep in mind that other handlers will continue to run on this element. This method works for native events triggered using the `trigger` method. To check if this method has been called, use `event.isPropagationStopped`.
`event.target`	DOM The element that triggered the event. This can be the element registered for the event or a descendant of it. It is very useful to compare `event.target` and `this` to determine event bubbling. The property is useful for event delegation when events are bubbling.
`event.timeStamp`	The time difference in milliseconds between the moment the event was generated by the browser and January 1, 1970. This property can be useful for determining the performance of an event by getting the difference in the `event.timeStamp` values for two times in your code. If you just want to get the current time inside an event handler, use the `getTime` method.
`event.type`	This property specifies the event type.
`event.which`	This property indicates which keyboard or mouse key was pressed. For a mouse: `1` is the left button, `2` is the wheel, `3` is the right button. Use `event.which` instead of `event.button`.

Other properties of the event object

There are other properties that are copied to the event object:

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

To access properties not listed above, you can use the event.originalEvent object.

Example

Let's output in div - which keys were pressed:

<input id="test" value="type something">
<div id="text"></div>

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

Example

Let's output in a div - which tag we will click on:

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

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

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

Event object

Properties and methods of the event object

Other properties of the event object

Example

Example

See also