ContextQMD
Back to Trilium

Interface UIEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>

docs/Script API/interfaces/Frontend_Script_API._internal_.UIEventBase.html

0.102.220.7 KB
Original Source

Interface UIEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>

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

interface UIEventBase<
TDelegateTarget = any,
TData = any,
TCurrentTarget = any,
TTarget = any,
> {
altKey: undefined | boolean;
bubbles: boolean;
button: undefined | number;
buttons: undefined | number;
cancelable: 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: number;
eventPhase: number;
key: undefined | string;
keyCode: undefined | number;
metaKey: undefined | boolean;
namespace?: string;
offsetX: undefined | number;
offsetY: undefined | number;
originalEvent?: UIEvent;
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: 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)

Index

Properties

altKeybubblesbuttonbuttonscancelablechangedTouchescharcharCodeclientXclientYctrlKeycurrentTargetdatadelegateTargetdetaileventPhasekeykeyCodemetaKeynamespace?offsetXoffsetYoriginalEvent?pageXpageYpointerIdpointerTyperesult?screenXscreenYshiftKeytargettargetTouchestimeStamptoElementtouchestypeviewwhich

Methods

isDefaultPreventedisImmediatePropagationStoppedisPropagationStoppedpreventDefaultstopImmediatePropagationstopPropagation

Properties

altKey

altKey: undefined | boolean

bubbles

bubbles: boolean

button

button: undefined | number

buttons

buttons: undefined | number

cancelable

cancelable: 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});Copy

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( ", " ) + "
" );});}</script>​</body></html>Copy

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

detail

detail: number

eventPhase

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

Optionalnamespace

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

offsetX

offsetX: undefined | number

offsetY

offsetY: undefined | number

OptionaloriginalEvent

originalEvent?: UIEvent

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

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

pointerId

pointerId: undefined | number

pointerType

pointerType: undefined | string

Optionalresult

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

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&#39;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>Copy

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 + "
" );} else {$( "div" ).append( "Click again.
" );}last = event.timeStamp;});</script>​</body></html>Copy

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

view

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

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() ); // falseevent.preventDefault();alert( event.isDefaultPrevented() ); // true});Copy

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

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

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

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

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

Settings

Member Visibility

  • Protected
  • Inherited
  • External

ThemeOSLightDark

On This Page

Properties altKeybubblesbuttonbuttonscancelablechangedTouchescharcharCodeclientXclientYctrlKeycurrentTargetdatadelegateTargetdetaileventPhasekeykeyCodemetaKeynamespaceoffsetXoffsetYoriginalEventpageXpageYpointerIdpointerTyperesultscreenXscreenYshiftKeytargettargetTouchestimeStamptoElementtouchestypeviewwhich Methods isDefaultPreventedisImmediatePropagationStoppedisPropagationStoppedpreventDefaultstopImmediatePropagationstopPropagation