Interface TriggeredEvent<TDelegateTarget, TData, TCurrentTarget, TTarget>

Base type for jQuery events that have been triggered (including events triggered on plain objects).

Type parameters

  • TDelegateTarget

  • TData

  • TCurrentTarget

  • TTarget

Hierarchy

Index

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

currentTarget

currentTarget: TCurrentTarget

The current DOM element within the event bubbling phase.

see

``

since

1.3

example

​ ````Alert that currentTarget matches the this keyword.

$( "p" ).click(function( event ) {
alert( event.currentTarget === this ); // true
});

data

data: TData

An optional object of data passed to an event method when the current executing handler is bound.

see

``

since

1.1

example

​ ````Within a for loop, pass the value of i to the .on() method so that the current iteration's value is preserved.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.data demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><button> 0 </button>
<button> 1 </button>
<button> 2 </button>
<button> 3 </button>
<button> 4 </button><div id="log"></div><script>
var logDiv = $( "#log" );
​
for ( var i = 0; i < 5; i++ ) {
$( "button" ).eq( i ).on( "click", { value: i }, function( event ) {
var msgs = [
"button = " + $( this ).index(),
"event.data.value = " + event.data.value,
"i = " + i
];
logDiv.append( msgs.join( ", " ) + "<br>" );
});
}
</script></body>
</html>

delegateTarget

delegateTarget: TDelegateTarget

The element where the currently-called jQuery event handler was attached.

see

``

since

1.7

example

​ ````When a button in any box class is clicked, change the box's background color to red.

$( ".box" ).on( "click", "button", function( event ) {
$( event.delegateTarget ).css( "background-color", "red" );
});

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>

Optional namespace

namespace: string

The namespace specified when the event was triggered.

see

``

since

1.4.3

example

​ ````Determine the event namespace used.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.namespace demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><button>display event.namespace</button>
<p></p><script>
$( "p" ).on( "test.something", function( event ) {
alert( event.namespace );
});
$( "button" ).click(function( event ) {
$( "p" ).trigger( "test.something" );
});
</script></body>
</html>

offsetX

offsetX: number | undefined

offsetY

offsetY: number | undefined

Optional originalEvent

originalEvent: _Event

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

Optional result

result: any

The last value returned by an event handler that was triggered by this event, unless the value was undefined.

see

``

since

1.3

example

​ ````Display previous handler's return value

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.result demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><button>display event.result</button>
<p></p><script>
$( "button" ).click(function( event ) {
return "hey";
});
$( "button" ).click(function( event ) {
$( "p" ).html( event.result );
});
</script></body>
</html>

screenX

screenX: number | undefined

screenY

screenY: number | undefined

shiftKey

shiftKey: boolean | undefined

target

target: TTarget

The DOM element that initiated the event.

see

``

since

1.0

example

​ ````Display the tag's name on click

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<style>
span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div><script>
$( "body" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
});
</script></body>
</html>
example

​ ````Implements a simple event delegation: The click handler is added to an unordered list, and the children of its li children are hidden. Clicking one of the li children toggles (see toggle()) their children.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>event.target demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body><ul>
<li>item 1
<ul>
<li>sub item 1-a</li>
<li>sub item 1-b</li>
</ul>
</li>
<li>item 2
<ul>
<li>sub item 2-a</li>
<li>sub item 2-b</li>
</ul>
</li>
</ul><script>
function handler( event ) {
var target = $( event.target );
if ( target.is( "li" ) ) {
target.children().toggle();
}
}
$( "ul" ).click( handler ).find( "ul" ).hide();
</script></body>
</html>

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