Interface TriggeredEvent<TDelegateTarget, TData, TCurrentTarget, TTarget>

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

interface TriggeredEvent<
    TDelegateTarget = any,
    TData = any,
    TCurrentTarget = any,
    TTarget = any,
> {
    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;
    currentTarget: TCurrentTarget;
    data: TData;
    delegateTarget: TDelegateTarget;
    detail: undefined | number;
    eventPhase: undefined | number;
    key: undefined | string;
    keyCode: undefined | number;
    metaKey: undefined | boolean;
    namespace?: string;
    offsetX: undefined | number;
    offsetY: undefined | number;
    originalEvent?: Event;
    pageX: undefined | number;
    pageY: undefined | number;
    pointerId: undefined | number;
    pointerType: undefined | string;
    result?: any;
    screenX: undefined | number;
    screenY: undefined | number;
    shiftKey: undefined | boolean;
    target: TTarget;
    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;
}

Type Parameters

TDelegateTarget = any
TData = any
TCurrentTarget = any
TTarget = any

Hierarchy (View Summary)

Event
- TriggeredEvent
  - UIEventBase

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

currentTarget

currentTarget: TCurrentTarget

The current DOM element within the event bubbling phase.

See

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

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

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

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

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

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

`Optional`namespace

namespace?: string

The namespace specified when the event was triggered.

See

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

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

offsetY

offsetY: undefined | number

`Optional`originalEvent

originalEvent?: Event

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

`Optional`result

result?: any

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

See

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

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

screenY

screenY: undefined | number

shiftKey

shiftKey: undefined | boolean

target

target: TTarget

The DOM element that initiated the event.

See

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

Since

1.0

Example: ````Display the tag's name on click ```html <!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: 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
});
```
Inherited from Event.isDefaultPrevented
- 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
});
```
Inherited from Event.stopPropagation
- Defined in node_modules/@types/jquery/misc.d.ts:5214

Interface TriggeredEvent<TDelegateTarget, TData, TCurrentTarget, TTarget>

Type Parameters

Hierarchy (View Summary)

Index

Properties

Methods

Properties

altKey

bubbles

button

buttons

cancelable

changedTouches

char

Deprecated

charCode

Deprecated

clientX

clientY

ctrlKey

currentTarget

See

Since

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

data

See

Since

Example: ​ ````Within a for loop, pass the value of i to the .on() method so that the current iteration&#39;s value is preserved.

delegateTarget

See

Since

Example: ​ ````When a button in any box class is clicked, change the box&#39;s background color to red.

detail

eventPhase

key

keyCode

Deprecated

metaKey

See

Since

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

Optionalnamespace

See

Since

Example: ​ ````Determine the event namespace used.

offsetX

offsetY

OptionaloriginalEvent

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

Optionalresult

See

Since

Example: ​ ````Display previous handler&#39;s return value

screenX

screenY

shiftKey

target

See

Since

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.

Example: ````Alert that currentTarget matches the `this` keyword.

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

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

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

`Optional`namespace

Example: ````Determine the event namespace used.

`Optional`originalEvent

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

`Optional`result

Example: ````Display previous handler's return value

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.