JavaScript HTML DOM Events

A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.

To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:

• When a user clicks the mouse
• When a web page has loaded
• When an image has been loaded
• When the mouse moves over an element
• When an input field is changed
• When an HTML form is submitted
• When a user strokes a key

In this example, the content of the element is changed when a user clicks on it:

Example

Click on this text!

In this example, a function is called from the event handler:

Example

Click on this text!

HTML Event Attributes

To assign events to HTML elements you can use event attributes.

Example

Assign an onclick event to a button element:

In the example above, a function named displayDate will be executed when the button is clicked.

Assign Events Using the HTML DOM

The HTML DOM allows you to assign events to HTML elements using JavaScript:

Example

Assign an onclick event to a button element:

In the example above, a function named displayDate is assigned to an HTML element with the id=»myBtn» .

The function will be executed when the button is clicked.

The onload and onunload Events

The onload and onunload events are triggered when the user enters or leaves the page.

The onload event can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

The onload and onunload events can be used to deal with cookies.

Example

The onchange Event

The onchange event is often used in combination with validation of input fields.

Below is an example of how to use the onchange. The upperCase() function will be called when a user changes the content of an input field.

Example

The onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger a function when the user mouses over, or out of, an HTML element:

The onmousedown, onmouseup and onclick Events

The onmousedown , onmouseup , and onclick events are all parts of a mouse-click. First when a mouse-button is clicked, the onmousedown event is triggered, then, when the mouse-button is released, the onmouseup event is triggered, finally, when the mouse-click is completed, the onclick event is triggered.

More Examples

onmousedown and onmouseup
Change an image when a user holds down the mouse button.

onload
Display an alert box when the page has finished loading.

onfocus
Change the background-color of an input field when it gets focus.

Mouse Events
Change the color of an element when the cursor moves over it.

HTML DOM Event Object Reference

For a list of all HTML DOM events, look at our complete HTML DOM Event Object Reference.

Источник

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

Источник

JavaScript Events

HTML events are «things» that happen to HTML elements.

When JavaScript is used in HTML pages, JavaScript can «react» on these events.

HTML Events

An HTML event can be something the browser does, or something a user does.

Here are some examples of HTML events:

• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked

Often, when events happen, you may want to do something.

JavaScript lets you execute code when events are detected.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements.

In the following example, an onclick attribute (with code), is added to a element:

Example

In the example above, the JavaScript code changes the content of the element with >

In the next example, the code changes the content of its own element (using this.innerHTML ):

Example

JavaScript code is often several lines long. It is more common to see event attributes calling functions:

Example

Common HTML Events

Here is a list of some common HTML events:

Event	Description
onchange	An HTML element has been changed
onclick	The user clicks an HTML element
onmouseover	The user moves the mouse over an HTML element
onmouseout	The user moves the mouse away from an HTML element
onkeydown	The user pushes a keyboard key
onload	The browser has finished loading the page

JavaScript Event Handlers

Event handlers can be used to handle and verify user input, user actions, and browser actions:

• Things that should be done every time a page loads
• Things that should be done when the page is closed
• Action that should be performed when a user clicks a button
• Content that should be verified when a user inputs data
• And more .

Many different methods can be used to let JavaScript work with events:

• HTML event attributes can execute JavaScript code directly
• HTML event attributes can call JavaScript functions
• You can assign your own event handler functions to HTML elements
• You can prevent events from being sent or being handled
• And more .

You will learn a lot more about events and event handlers in the HTML DOM chapters.

Источник

HTML onclick Event Attribute

The onclick attribute fires on a mouse click on the element.

Browser Support

Syntax

Attribute Values

Technical Details

More Examples

Example

Click on a

element to change its text color to red:

Click me to change my text color.

Example

Click on a button to copy some text from an input field to another input field:

Related Pages

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.

Источник