docs/Script API/interfaces/Frontend_Script_API._internal_.Event.html
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.
<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;
}
altKeybubblesbuttonbuttonscancelablechangedTouchescharcharCodeclientXclientYctrlKeydetaileventPhasekeykeyCodemetaKeyoffsetXoffsetYpageXpageYpointerIdpointerTypescreenXscreenYshiftKeytargetTouchestimeStamptoElementtouchestypeviewwhich
isDefaultPreventedisImmediatePropagationStoppedisPropagationStoppedpreventDefaultstopImmediatePropagationstopPropagation
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
Indicates whether the META key was pressed when the event fired.
<a href="https://api.jquery.com/event.metaKey/">https://api.jquery.com/event.metaKey/</a>
1.0.4
<!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>Copy
offsetX: undefined | number
offsetY: undefined | number
pageX: undefined | number
The mouse position relative to the left edge of the document.
<a href="https://api.jquery.com/event.pageX/">https://api.jquery.com/event.pageX/</a>
1.0.4
<!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>Copy
pageY: undefined | number
The mouse position relative to the top edge of the document.
<a href="https://api.jquery.com/event.pageY/">https://api.jquery.com/event.pageY/</a>
1.0.4
<!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>Copy
pointerId: undefined | number
pointerType: undefined | string
screenX: undefined | number
screenY: undefined | number
shiftKey: undefined | boolean
targetTouches: undefined | TouchList
timeStamp: number
The difference in milliseconds between the time the browser created the event and January 1, 1970.
<a href="https://api.jquery.com/event.timeStamp/">https://api.jquery.com/event.timeStamp/</a>
1.2.6
<!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 + "
" );} else {$( "div" ).append( "Click again.
" );}last = event.timeStamp;});</script></body></html>Copy
toElement: undefined | Element
touches: undefined | TouchList
type: string
Describes the nature of the event.
<a href="https://api.jquery.com/event.type/">https://api.jquery.com/event.type/</a>
1.0
$( "a" ).click(function( event ) {alert( event.type ); // "click"});Copy
view: undefined | Window
which: undefined | number
For key or mouse events, this property indicates the specific key or button that was pressed.
<a href="https://api.jquery.com/event.which/">https://api.jquery.com/event.which/</a>
1.1.3
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>Copy
isDefaultPrevented(): boolean
Returns whether event.preventDefault() was ever called on this event object.
<a href="https://api.jquery.com/event.isDefaultPrevented/">https://api.jquery.com/event.isDefaultPrevented/</a>
1.3
$( "a" ).click(function( event ) {alert( event.isDefaultPrevented() ); // falseevent.preventDefault();alert( event.isDefaultPrevented() ); // true});Copy
isImmediatePropagationStopped(): boolean
Returns whether event.stopImmediatePropagation() was ever called on this event object.
<a href="https://api.jquery.com/event.isImmediatePropagationStopped/">https://api.jquery.com/event.isImmediatePropagationStopped/</a>
1.3
<!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>Copy
isPropagationStopped(): boolean
Returns whether event.stopPropagation() was ever called on this event object.
<a href="https://api.jquery.com/event.isPropagationStopped/">https://api.jquery.com/event.isPropagationStopped/</a>
1.3
<!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>Copy
preventDefault(): void
If this method is called, the default action of the event will not be triggered.
<a href="https://api.jquery.com/event.preventDefault/">https://api.jquery.com/event.preventDefault/</a>
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>Copy
stopImmediatePropagation(): void
Keeps the rest of the handlers from being executed and prevents the event from bubbling up the DOM tree.
<a href="https://api.jquery.com/event.stopImmediatePropagation/">https://api.jquery.com/event.stopImmediatePropagation/</a>
1.3
<!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>Copy
stopPropagation(): void
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
<a href="https://api.jquery.com/event.stopPropagation/">https://api.jquery.com/event.stopPropagation/</a>
1.0
$( "p" ).click(function( event ) {event.stopPropagation();// Do something});Copy
Member Visibility
ThemeOSLightDark
Properties altKeybubblesbuttonbuttonscancelablechangedTouchescharcharCodeclientXclientYctrlKeydetaileventPhasekeykeyCodemetaKeyoffsetXoffsetYpageXpageYpointerIdpointerTypescreenXscreenYshiftKeytargetTouchestimeStamptoElementtouchestypeviewwhich Methods isDefaultPreventedisImmediatePropagationStoppedisPropagationStoppedpreventDefaultstopImmediatePropagationstopPropagation