# 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

- Defined in node_modules/@types/jquery/misc.d.ts:4748

##### Index

### Properties

altKey
bubbles
button
buttons
cancelable
changedTouches
char
charCode
clientX
clientY
ctrlKey
detail
eventPhase
key
keyCode
metaKey
offsetX
offsetY
pageX
pageY
pointerId
pointerType
screenX
screenY
shiftKey
targetTouches
timeStamp
toElement
touches
type
view
which

### Methods

isDefaultPrevented
isImmediatePropagationStopped
isPropagationStopped
preventDefault
stopImmediatePropagation
stopPropagation

## Properties

### altKey

altKey: undefined | boolean

- Defined in node_modules/@types/jquery/misc.d.ts:4926

### bubbles

bubbles: undefined | boolean

- Defined in node_modules/@types/jquery/misc.d.ts:4754

### button

button: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4765

### buttons

buttons: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4766

### cancelable

cancelable: undefined | boolean

- Defined in node_modules/@types/jquery/misc.d.ts:4755

### changedTouches

changedTouches: undefined | TouchList

- Defined in node_modules/@types/jquery/misc.d.ts:4865

### char

char: undefined | string

#### Deprecated

- Defined in node_modules/@types/jquery/misc.d.ts:4856

### charCode

charCode: undefined | number

#### Deprecated

- Defined in node_modules/@types/jquery/misc.d.ts:4858

### clientX

clientX: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4767

### clientY

clientY: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4768

### ctrlKey

ctrlKey: undefined | boolean

- Defined in node_modules/@types/jquery/misc.d.ts:4927

### detail

detail: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4760

### eventPhase

eventPhase: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4756

### key

key: undefined | string

- Defined in node_modules/@types/jquery/misc.d.ts:4859

### keyCode

keyCode: undefined | number

#### Deprecated

- Defined in node_modules/@types/jquery/misc.d.ts:4861

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

- Defined in node_modules/@types/jquery/misc.d.ts:4964

### offsetX

offsetX: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4769

### offsetY

offsetY: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4770

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

- Defined in node_modules/@types/jquery/misc.d.ts:4806

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

- Defined in node_modules/@types/jquery/misc.d.ts:4842

### pointerId

pointerId: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4850

### pointerType

pointerType: undefined | string

- Defined in node_modules/@types/jquery/misc.d.ts:4851

### screenX

screenX: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4843

### screenY

screenY: undefined | number

- Defined in node_modules/@types/jquery/misc.d.ts:4844

### shiftKey

shiftKey: undefined | boolean

- Defined in node_modules/@types/jquery/misc.d.ts:4965

### targetTouches

targetTouches: undefined | TouchList

- Defined in node_modules/@types/jquery/misc.d.ts:4866

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

- Defined in node_modules/@types/jquery/misc.d.ts:5012

### toElement

toElement: undefined | Element

#### Deprecated

- Defined in node_modules/@types/jquery/misc.d.ts:4846

### touches

touches: undefined | TouchList

- Defined in node_modules/@types/jquery/misc.d.ts:4867

### 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"
    });

- Defined in node_modules/@types/jquery/misc.d.ts:5024

### view

view: undefined | Window

- Defined in node_modules/@types/jquery/misc.d.ts:4761

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

- Defined in node_modules/@types/jquery/misc.d.ts:4922

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

  - Defined in node_modules/@types/jquery/misc.d.ts:5079

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

  - Defined in node_modules/@types/jquery/misc.d.ts:5120

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

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

  - Defined in node_modules/@types/jquery/misc.d.ts:5152

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

  - Defined in node_modules/@types/jquery/misc.d.ts:5201

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