Javascript get event name

target Event Property

Get the name of the element where the event occurred:

Description

The target property returns the element where the event occured.

The target property is read-only.

The target property returns the element on which the event occurred, opposed to the currentTarget property, which returns the element whose event listener triggered the event.

See Also:

Syntax

Technical Details

More examples

Example

Get the element that triggered the event:

Example

Get the name of the element that triggered the event:

Browser Support

event.target is a DOM Level 2 (2001) feature.

It is fully supported in all browsers:

Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Events

DOM Events allow JavaScript to add event listener or event handlers to HTML elements.

For a tutorial about Events, read our JavaScript Events Tutorial.

Examples

In HTML onclick is the event listener, myFunction is the event handler:

In JavaScript click is the event, myFunction is the event handler:

Event	Occurs When	Belongs To
abort	The loading of a media is aborted	UiEvent, Event
afterprint	A page has started printing	Event
animationend	A CSS animation has completed	AnimationEvent
animationiteration	A CSS animation is repeated	AnimationEvent
animationstart	A CSS animation has started	AnimationEvent
beforeprint	A page is about to be printed	Event
beforeunload	Before a document is about to be unloaded	UiEvent, Event
blur	An element loses focus	FocusEvent
canplay	The browser can start playing a media (has buffered enough to begin)	Event
canplaythrough	The browser can play through a media without stopping for buffering	Event
change	The content of a form element has changed	Event
click	An element is clicked on	MouseEvent
contextmenu	An element is right-clicked to open a context menu	MouseEvent
copy	The content of an element is copied	ClipboardEvent
cut	The content of an element is cutted	ClipboardEvent
dblclick	An element is double-clicked	MouseEvent
drag	An element is being dragged	DragEvent
dragend	Dragging of an element has ended	DragEvent
dragenter	A dragged element enters the drop target	DragEvent
dragleave	A dragged element leaves the drop target	DragEvent
dragover	A dragged element is over the drop target	DragEvent
dragstart	Dragging of an element has started	DragEvent
drop	A dragged element is dropped on the target	DragEvent
durationchange	The duration of a media is changed	Event
ended	A media has reach the end («thanks for listening»)	Event
error	An error has occurred while loading a file	ProgressEvent, UiEvent, Event
focus	An element gets focus	FocusEvent
focusin	An element is about to get focus	FocusEvent
focusout	An element is about to lose focus	FocusEvent
fullscreenchange	An element is displayed in fullscreen mode	Event
fullscreenerror	An element can not be displayed in fullscreen mode	Event
hashchange	There has been changes to the anchor part of a URL	HashChangeEvent
input	An element gets user input	InputEvent, Event
invalid	An element is invalid	Event
keydown	A key is down	KeyboardEvent
keypress	A key is pressed	KeyboardEvent
keyup	A key is released	KeyboardEvent
load	An object has loaded	UiEvent, Event
loadeddata	Media data is loaded	Event
loadedmetadata	Meta data (like dimensions and duration) are loaded	Event
loadstart	The browser starts looking for the specified media	ProgressEvent
message	A message is received through the event source	Event
mousedown	The mouse button is pressed over an element	MouseEvent
mouseenter	The pointer is moved onto an element	MouseEvent
mouseleave	The pointer is moved out of an element	MouseEvent
mousemove	The pointer is moved over an element	MouseEvent
mouseover	The pointer is moved onto an element	MouseEvent
mouseout	The pointer is moved out of an element	MouseEvent
mouseup	A user releases a mouse button over an element	MouseEvent
mousewheel	Deprecated. Use the wheel event instead	WheelEvent
offline	The browser starts working offline	Event
online	The browser starts working online	Event
open	A connection with the event source is opened	Event
pagehide	User navigates away from a webpage	PageTransitionEvent
pageshow	User navigates to a webpage	PageTransitionEvent
paste	Some content is pasted in an element	ClipboardEvent
pause	A media is paused	Event
play	The media has started or is no longer paused	Event
playing	The media is playing after beeing paused or buffered	Event
popstate	The window’s history changes	PopStateEvent
progress	The browser is downloading media data	Event
ratechange	The playing speed of a media is changed	Event
resize	The document view is resized	UiEvent, Event
reset	A form is reset	Event
scroll	An scrollbar is being scrolled	UiEvent, Event
search	Something is written in a search field	Event
seeked	Skipping to a media position is finished	Event
seeking	Skipping to a media position is started	Event
select	User selects some text	UiEvent, Event
show	A element is shown as a context menu	Event
stalled	The browser is trying to get unavailable media data	Event
storage	A Web Storage area is updated	StorageEvent
submit	A form is submitted	Event
suspend	The browser is intentionally not getting media data	Event
timeupdate	The playing position has changed (the user moves to a different point in the media)	Event
toggle	The user opens or closes the element	Event
touchcancel	The touch is interrupted	TouchEvent
touchend	A finger is removed from a touch screen	TouchEvent
touchmove	A finger is dragged across the screen	TouchEvent
touchstart	A finger is placed on a touch screen	TouchEvent
transitionend	A CSS transition has completed	TransitionEvent
unload	A page has unloaded	UiEvent, Event
volumechange	The volume of a media is changed (includes muting)	Event
waiting	A media is paused but is expected to resume (e.g. buffering)	Event
wheel	The mouse wheel rolls up or down over an element	WheelEvent

Источник

Event

The Event interface represents an event which takes place in the DOM.

An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task. It can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent() .

There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.

Many DOM elements can be set up to accept (or «listen» for) these events, and execute code in response to process (or «handle») them. Event-handlers are usually connected (or «attached») to various HTML elements (such as , , , etc.) using EventTarget.addEventListener() , and this generally replaces using the old HTML event handler attributes. Further, when properly added, such handlers can also be disconnected if needed using removeEventListener() .

Note: One element can have several such handlers, even for the exact same event—particularly if separate, independent code modules attach them, each for its own independent purposes. (For example, a webpage with an advertising-module and statistics-module both monitoring video-watching.)

When there are many nested elements, each with its own handler(s), event processing can become very complicated—especially where a parent element receives the very same event as its child elements because «spatially» they overlap so the event technically occurs in both, and the processing order of such events depends on the Event bubbling and capture settings of each handler triggered.

Interfaces based on Event

Below is a list of interfaces which are based on the main Event interface, with links to their respective documentation in the MDN API reference.

Note that all event interfaces have names which end in «Event».

• AnimationEvent
• AudioProcessingEvent Deprecated
• BeforeUnloadEvent
• BlobEvent
• ClipboardEvent
• CloseEvent
• CompositionEvent
• CustomEvent
• DeviceMotionEvent
• DeviceOrientationEvent
• DragEvent
• ErrorEvent
• FetchEvent
• FocusEvent
• FontFaceSetLoadEvent
• FormDataEvent
• GamepadEvent
• HashChangeEvent
• HIDInputReportEvent
• IDBVersionChangeEvent
• InputEvent
• KeyboardEvent
• MediaStreamEvent Deprecated
• MessageEvent
• MouseEvent
• MutationEvent Deprecated
• OfflineAudioCompletionEvent
• PageTransitionEvent
• PaymentRequestUpdateEvent
• PointerEvent
• PopStateEvent
• ProgressEvent
• RTCDataChannelEvent
• RTCPeerConnectionIceEvent
• StorageEvent
• SubmitEvent
• SVGEvent Deprecated
• TimeEvent
• TouchEvent
• TrackEvent
• TransitionEvent
• UIEvent
• WebGLContextEvent
• WheelEvent

Constructor

Creates an Event object, returning it to the caller.

Instance properties

A boolean value indicating whether or not the event bubbles up through the DOM.

A boolean value indicating whether the event is cancelable.

A boolean indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM.

A reference to the currently registered target for the event. This is the object to which the event is currently slated to be sent. It’s possible this has been changed along the way through retargeting.

Indicates whether or not the call to event.preventDefault() canceled the event.

Indicates which phase of the event flow is being processed. It is one of the following numbers: NONE , CAPTURING_PHASE , AT_TARGET , BUBBLING_PHASE .

Indicates whether or not the event was initiated by the browser (after a user click, for instance) or by a script (using an event creation method, for example).

A reference to the object to which the event was originally dispatched.

The time at which the event was created (in milliseconds). By specification, this value is time since epoch—but in reality, browsers’ definitions vary. In addition, work is underway to change this to be a DOMHighResTimeStamp instead.

The name identifying the type of the event.

Legacy and non-standard properties

A historical alias to Event.stopPropagation() that should be used instead. Setting its value to true before returning from an event handler prevents propagation of the event.

The explicit original target of the event.

The original target of the event, before any retargetings.

A historical property still supported in order to ensure existing sites continue to work. Use Event.preventDefault() and Event.defaultPrevented instead.

A boolean value indicating whether the given event will bubble across through the shadow root into the standard DOM. Use composed instead.

Instance methods

Returns the event’s path (an array of objects on which listeners will be invoked). This does not include nodes in shadow trees if the shadow root was created with its ShadowRoot.mode closed.

Cancels the event (if it is cancelable).

For this particular event, prevent all other listeners from being called. This includes listeners attached to the same element as well as those attached to elements that will be traversed later (during the capture phase, for instance).

Stops the propagation of events further along in the DOM.

Deprecated methods

Initializes the value of an Event created. If the event has already been dispatched, this method does nothing. Use the constructor ( Event() instead).

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• Types of events available: Event reference
• Comparison of Event Targets ( target vs. currentTarget vs. relatedTarget vs. originalTarget )
• Creating and triggering custom events

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник