sesaparcours
    Preparing search index...

    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.

    • <a href="https://api.jquery.com/category/events/event-object/">https://api.jquery.com/category/events/event-object/</a>
    • <a href="editor_EditorTree._internal_.TriggeredEvent.html" class="tsd-kind-interface">TriggeredEvent</a>
    interface Event {
        altKey: boolean | undefined;
        bubbles: boolean | undefined;
        button: number | undefined;
        buttons: number | undefined;
        cancelable: boolean | undefined;
        changedTouches: TouchList | undefined;
        char: string | undefined;
        charCode: number | undefined;
        clientX: number | undefined;
        clientY: number | undefined;
        ctrlKey: boolean | undefined;
        detail: number | undefined;
        eventPhase: number | undefined;
        key: string | undefined;
        keyCode: number | undefined;
        metaKey: boolean | undefined;
        offsetX: number | undefined;
        offsetY: number | undefined;
        pageX: number | undefined;
        pageY: number | undefined;
        pointerId: number | undefined;
        pointerType: string | undefined;
        screenX: number | undefined;
        screenY: number | undefined;
        shiftKey: boolean | undefined;
        targetTouches: TouchList | undefined;
        timeStamp: number;
        toElement: Element | undefined;
        touches: TouchList | undefined;
        type: string;
        view: Window | undefined;
        which: number | undefined;
        isDefaultPrevented(): boolean;
        isImmediatePropagationStopped(): boolean;
        isPropagationStopped(): boolean;
        preventDefault(): void;
        stopImmediatePropagation(): void;
        stopPropagation(): void;
    }

    Hierarchy (View Summary)

    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: boolean | undefined
    bubbles: boolean | undefined
    button: number | undefined
    buttons: number | undefined
    cancelable: boolean | undefined
    changedTouches: TouchList | undefined
    char: string | undefined
    charCode: number | undefined
    clientX: number | undefined
    clientY: number | undefined
    ctrlKey: boolean | undefined
    detail: number | undefined
    eventPhase: number | undefined
    key: string | undefined
    keyCode: number | undefined
    metaKey: boolean | undefined

    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>
    offsetX: number | undefined
    offsetY: number | undefined
    pageX: number | undefined

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

    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>
    pointerId: number | undefined
    pointerType: string | undefined
    screenX: number | undefined
    screenY: number | undefined
    shiftKey: boolean | undefined
    targetTouches: TouchList | undefined
    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 + "<br>" );
    } else {
    $( "div" ).append( "Click again.<br>" );
    }
    last = event.timeStamp;
    });
    </script>
    ​
    </body>
    </html>
    toElement: Element | undefined
    touches: TouchList | undefined
    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"
    });
    view: Window | undefined
    which: number | undefined

    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

    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

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

      Returns boolean

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

      1.3

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

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

      Returns boolean

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

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

      Returns boolean

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

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

      Returns void

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

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

      Returns void

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

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

      Returns void

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

    Settings

    Member Visibility

    On This Page

    Properties
    Methods