DragEventBase | FORMCYCLE 7.0.7 - JavaScript for forms

Type parameters

TDelegateTarget
TData
TCurrentTarget
TTarget

Hierarchy

UIEventBase<TDelegateTarget, TData, TCurrentTarget, TTarget>
- DragEventBase

Index

Properties

Methods

Properties

altKey

altKey: boolean | undefined

bubbles

bubbles: boolean

button

button: number | undefined

buttons

buttons: number | undefined

cancelable

cancelable: boolean

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

eventPhase

eventPhase: number

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

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

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

Inherited from Event.isDefaultPrevented
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

Inherited from Event.stopPropagation
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