Event | PrimeFaces JavaScript API Docs

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 `Event object` 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: ``
see: ``

Hierarchy

Event
- TriggeredEvent

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

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

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>

offsetX

offsetX: undefined | number

offsetY

offsetY: undefined | number

pageX

pageX: undefined | number

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

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

pointerType

pointerType: undefined | string

screenX

screenX: undefined | number

screenY

screenY: undefined | number

shiftKey

shiftKey: undefined | boolean

targetTouches

targetTouches: undefined | TouchList

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

deprecated

touches

touches: undefined | TouchList

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

which

which: undefined | number

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

Hierarchy

Index

Properties

Methods

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

Returns boolean

isImmediatePropagationStopped

Returns boolean

isPropagationStopped

Returns boolean

preventDefault

Returns void

stopImmediatePropagation

Returns void

stopPropagation

Returns void