Interface Event

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler (no checks for window.event required). It normalizes the target, relatedTarget, which, metaKey and pageX/Y properties and provides both stopPropagation() and preventDefault() methods.

Those properties are all documented, and accompanied by examples, on the `Event object` page.

The standard events in the Document Object Model are: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, and keyup. Since the DOM event names have predefined meanings for some elements, using them for other purposes is not recommended. jQuery's event model can trigger an event by any name on an element, and it is propagated up the DOM tree to which that element belongs, if any.

see

``

see

``

Hierarchy

Index

Properties

Methods

Properties

altKey

altKey: boolean | undefined

bubbles

bubbles: boolean | undefined

button

button: number | undefined

buttons

buttons: number | undefined

cancelable

cancelable: boolean | undefined

changedTouches

changedTouches: TouchList | undefined

char

char: string | undefined
deprecated

charCode

charCode: number | undefined
deprecated

clientX

clientX: number | undefined

clientY

clientY: number | undefined

ctrlKey

ctrlKey: boolean | undefined

detail

detail: number | undefined

eventPhase

eventPhase: number | undefined

key

key: string | undefined

keyCode

keyCode: number | undefined
deprecated

metaKey

metaKey: boolean | undefined

Indicates whether the META key was pressed when the event fired.

see

``

since

1.0.4

example

​ ````Determine whether the META key was pressed when the event fired.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.metaKey demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button value="Test" name="Test" id="checkMetaKey">Click me!</button>
<div id="display"></div>
​
<script>
$( "#checkMetaKey" ).click(function( event ) {
$( "#display" ).text( event.metaKey );
});
</script>
​
</body>
</html>

offsetX

offsetX: number | undefined

offsetY

offsetY: number | undefined

pageX

pageX: number | undefined

The mouse position relative to the left edge of the document.

see

``

since

1.0.4

example

​ ````Show the mouse position relative to the left and top edges of the document (within this iframe).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.pageX demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<div id="log"></div>
​
<script>
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>
​
</body>
</html>

pageY

pageY: number | undefined

The mouse position relative to the top edge of the document.

see

``

since

1.0.4

example

​ ````Show the mouse position relative to the left and top edges of the document (within this iframe).

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.pageY demo</title>
<style>
body {
background-color: #eef;
}
div {
padding: 20px;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<div id="log"></div>
​
<script>
$( document ).on( "mousemove", function( event ) {
$( "#log" ).text( "pageX: " + event.pageX + ", pageY: " + event.pageY );
});
</script>
​
</body>
</html>

pointerId

pointerId: number | undefined

pointerType

pointerType: string | undefined

screenX

screenX: number | undefined

screenY

screenY: number | undefined

shiftKey

shiftKey: boolean | undefined

targetTouches

targetTouches: TouchList | undefined

timeStamp

timeStamp: number

The difference in milliseconds between the time the browser created the event and January 1, 1970.

see

``

since

1.2.6

example

​ ````Display the time since the click handler last executed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.timeStamp demo</title>
<style>
div {
height: 100px;
width: 300px;
margin: 10px;
background-color: #ffd;
overflow: auto;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<div>Click.</div>
​
<script>
var last, diff;
$( "div" ).click(function( event ) {
if ( last ) {
diff = event.timeStamp - last;
$( "div" ).append( "time since last event: " + diff + "<br>" );
} else {
$( "div" ).append( "Click again.<br>" );
}
last = event.timeStamp;
});
</script>
​
</body>
</html>

toElement

toElement: Element | undefined
deprecated

touches

touches: TouchList | undefined

type

type: string

Describes the nature of the event.

see

``

since

1.0

example

​ ````On all anchor clicks, alert the event type.

$( "a" ).click(function( event ) {
alert( event.type ); // "click"
});

view

view: Window | undefined

which

which: number | undefined

For key or mouse events, this property indicates the specific key or button that was pressed.

see

``

since

1.1.3

example

​ ````Log which key was depressed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="type something">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "keydown", function( event ) {
$( "#log" ).html( event.type + ": " +  event.which );
});
</script>
​
</body>
</html>
example

​ ````Log which mouse button was depressed.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.which demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<input id="whichkey" value="click here">
<div id="log"></div>
​
<script>
$( "#whichkey" ).on( "mousedown", function( event ) {
$( "#log" ).html( event.type + ": " +  event.which );
});
</script>
​
</body>
</html>

Methods

isDefaultPrevented

  • isDefaultPrevented(): boolean

  • Returns whether event.preventDefault() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.preventDefault() was called.

    $( "a" ).click(function( event ) {
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});

    Returns boolean

isImmediatePropagationStopped

  • isImmediatePropagationStopped(): boolean

  • Returns whether event.stopImmediatePropagation() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.stopImmediatePropagation() was called.

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.isImmediatePropagationStopped demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>click me</button>
<div id="stop-log"></div>
​
<script>
function immediatePropStopped( event ) {
var msg = "";
if ( event.isImmediatePropagationStopped() ) {
msg = "called";
} else {
msg = "not called";
}
$( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
​
$( "button" ).click(function( event ) {
immediatePropStopped( event );
event.stopImmediatePropagation();
immediatePropStopped( event );
});
</script>
​
</body>
</html>

    Returns boolean

isPropagationStopped

  • isPropagationStopped(): boolean

  • Returns whether event.stopPropagation() was ever called on this event object.

    see

    ``

    since

    1.3

    example

    ​ ````Checks whether event.stopPropagation() was called

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.isPropagationStopped demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<button>click me</button>
<div id="stop-log"></div>
​
<script>
function propStopped( event ) {
var msg = "";
if ( event.isPropagationStopped() ) {
msg = "called";
} else {
msg = "not called";
}
$( "#stop-log" ).append( "<div>" + msg + "</div>" );
}
​
$( "button" ).click(function(event) {
propStopped( event );
event.stopPropagation();
propStopped( event );
});
</script>
​
</body>
</html>

    Returns boolean

preventDefault

  • preventDefault(): void

  • If this method is called, the default action of the event will not be triggered.

    see

    ``

    since

    1.0

    example

    ​ ````Cancel the default action (navigation) of the click.

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.preventDefault demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<a href="https://jquery.com">default click action is prevented</a>
<div id="log"></div>
​
<script>
$( "a" ).click(function( event ) {
event.preventDefault();
$( "<div>" )
.append( "default " + event.type + " prevented" )
.appendTo( "#log" );
});
</script>
​
</body>
</html>

    Returns void

stopImmediatePropagation

  • stopImmediatePropagation(): void

  • Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.

    see

    ``

    since

    1.3

    example

    ​ ````Prevents other event handlers from being called.

    <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.stopImmediatePropagation demo</title>
<style>
p {
height: 30px;
width: 150px;
background-color: #ccf;
}
div {
height: 30px;
width: 150px;
background-color: #cfc;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
​
<p>paragraph</p>
<div>division</div>
​
<script>
$( "p" ).click(function( event ) {
event.stopImmediatePropagation();
});
$( "p" ).click(function( event ) {
// This function won't be executed
$( this ).css( "background-color", "#f00" );
});
$( "div" ).click(function( event ) {
// This function will be executed
$( this ).css( "background-color", "#f00" );
});
</script>
​
</body>
</html>

    Returns void

stopPropagation

  • stopPropagation(): void

  • Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

    see

    ``

    since

    1.0

    example

    ​ ````Kill the bubbling on the click event.

    $( "p" ).click(function( event ) {
event.stopPropagation();
// Do something
});

    Returns void