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 <a href="http://api.jquery.com/category/events/event-object/">Event object</a> 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

<a href="https://api.jquery.com/category/events/event-object/">https://api.jquery.com/category/events/event-object/</a>
<a href="Frontend_Script_API._internal_.TriggeredEvent.html" class="tsd-kind-interface">TriggeredEvent</a>

interface Event {
    altKey: undefined | boolean;
    bubbles: undefined | boolean;
    button: undefined | number;
    buttons: undefined | number;
    cancelable: undefined | boolean;
    changedTouches: undefined | TouchList;
    char: undefined | string;
    charCode: undefined | number;
    clientX: undefined | number;
    clientY: undefined | number;
    ctrlKey: undefined | boolean;
    detail: undefined | number;
    eventPhase: undefined | number;
    key: undefined | string;
    keyCode: undefined | number;
    metaKey: undefined | boolean;
    offsetX: undefined | number;
    offsetY: undefined | number;
    pageX: undefined | number;
    pageY: undefined | number;
    pointerId: undefined | number;
    pointerType: undefined | string;
    screenX: undefined | number;
    screenY: undefined | number;
    shiftKey: undefined | boolean;
    targetTouches: undefined | TouchList;
    timeStamp: number;
    toElement: undefined | Element;
    touches: undefined | TouchList;
    type: string;
    view: undefined | Window;
    which: undefined | number;
    isDefaultPrevented(): boolean;
    isImmediatePropagationStopped(): boolean;
    isPropagationStopped(): boolean;
    preventDefault(): void;
    stopImmediatePropagation(): void;
    stopPropagation(): void;
}

Hierarchy (View Summary)

Event
- TriggeredEvent

Properties

altKey

altKey: undefined | boolean

bubbles

bubbles: undefined | boolean

button

button: undefined | number

buttons

buttons: undefined | number

cancelable

cancelable: undefined | boolean

changedTouches

changedTouches: undefined | TouchList

char

char: undefined | string

Deprecated

charCode

charCode: undefined | number

Deprecated

clientX

clientX: undefined | number

clientY

clientY: undefined | number

ctrlKey

ctrlKey: undefined | boolean

detail

detail: undefined | number

eventPhase

eventPhase: undefined | number

key

key: undefined | string

keyCode

keyCode: undefined | number

Deprecated

metaKey

metaKey: undefined | boolean

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

See

<a href="https://api.jquery.com/event.metaKey/">https://api.jquery.com/event.metaKey/</a>

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: undefined | number

offsetY

offsetY: undefined | number

pageX

pageX: undefined | number

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

See

<a href="https://api.jquery.com/event.pageX/">https://api.jquery.com/event.pageX/</a>

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: undefined | number

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

See

<a href="https://api.jquery.com/event.pageY/">https://api.jquery.com/event.pageY/</a>

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: undefined | number

pointerType

pointerType: undefined | string

screenX

screenX: undefined | number

screenY

screenY: undefined | number

shiftKey

shiftKey: undefined | boolean

targetTouches

targetTouches: undefined | TouchList

timeStamp

timeStamp: number

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

See

<a href="https://api.jquery.com/event.timeStamp/">https://api.jquery.com/event.timeStamp/</a>

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: undefined | Element

Deprecated

touches

touches: undefined | TouchList

type

type: string

Describes the nature of the event.

See

<a href="https://api.jquery.com/event.type/">https://api.jquery.com/event.type/</a>

Since

1.0

Example: ````On all anchor clicks, alert the event type.

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

view

view: undefined | Window

which

which: undefined | number

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

See

<a href="https://api.jquery.com/event.which/">https://api.jquery.com/event.which/</a>

Since

1.1.3

Example: ````Log which key was depressed. ```html <!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.

Returns boolean
See
<a href="https://api.jquery.com/event.isDefaultPrevented/">https://api.jquery.com/event.isDefaultPrevented/</a>

Since
1.3
Example: ````Checks whether event.preventDefault() was called.
```
$( "a" ).click(function( event ) {
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});
```
- Defined in node_modules/@types/jquery/misc.d.ts:5038

isImmediatePropagationStopped

isImmediatePropagationStopped(): boolean

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

Returns boolean

See

<a href="https://api.jquery.com/event.isImmediatePropagationStopped/">https://api.jquery.com/event.isImmediatePropagationStopped/</a>

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>

isPropagationStopped

isPropagationStopped(): boolean

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

Returns boolean

See

<a href="https://api.jquery.com/event.isPropagationStopped/">https://api.jquery.com/event.isPropagationStopped/</a>

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>

preventDefault

preventDefault(): void

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

Returns void

See

<a href="https://api.jquery.com/event.preventDefault/">https://api.jquery.com/event.preventDefault/</a>

Since

1.0

<!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>

stopImmediatePropagation

stopImmediatePropagation(): void

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

Returns void

See

<a href="https://api.jquery.com/event.stopImmediatePropagation/">https://api.jquery.com/event.stopImmediatePropagation/</a>

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>

stopPropagation

stopPropagation(): void
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

Returns void
See
<a href="https://api.jquery.com/event.stopPropagation/">https://api.jquery.com/event.stopPropagation/</a>

Since
1.0
Example: ````Kill the bubbling on the click event.
```
$( "p" ).click(function( event ) {
event.stopPropagation();
// Do something
});
```
- Defined in node_modules/@types/jquery/misc.d.ts:5214

Interface Event

See

Hierarchy (View Summary)

Index

Properties

Methods

Properties

altKey

bubbles

button

buttons

cancelable

changedTouches

char

Deprecated

charCode

Deprecated

clientX

clientY

ctrlKey

detail

eventPhase

key

keyCode

Deprecated

metaKey

See

Since

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

offsetX

offsetY

pageX

See

Since

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

pageY

See

Since

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

pointerId

pointerType

screenX

screenY

shiftKey

targetTouches

timeStamp

See

Since

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

toElement

Deprecated

touches

type

See

Since

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

view

which

See

Since

Methods

isDefaultPrevented

Returns boolean

See

Since

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

isImmediatePropagationStopped

Returns boolean

See

Since

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

isPropagationStopped

Returns boolean

See

Since

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

preventDefault

Returns void

See

Since

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

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

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

Example: ````Display the time since the click handler last executed.

Example: ````On all anchor clicks, alert the event type.

Example: ````Checks whether event.preventDefault() was called.

Example: ````Checks whether event.stopImmediatePropagation() was called.

Example: ````Checks whether event.stopPropagation() was called

Example: ````Cancel the default action (navigation) of the click.

Example: ````Prevents other event handlers from being called.

Example: ````Kill the bubbling on the click event.