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.

With single quotes:

<some-HTML-element some-event='some JavaScript'>

With double quotes:

<some-HTML-element some-event="some JavaScript">

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

Example

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>

Try it Yourself »

In the example above, the JavaScript code changes the content of the element with id="demo".

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

Example

<button onclick="this.innerHTML=Date()">The time is?</button>

Try it Yourself »

Example

<button onclick="displayDate()">The time is?</button>

Try it Yourself »

Common HTML Events

Here is a list of some common HTML events:

The list is much longer: W3Schools JavaScript Reference HTML DOM Events.

JavaScript HTML DOM Events Examples

Examples of using JavaScript to react to events

Input Events

onblur - When a user leaves an input field

onchange - When a user changes the content of an input field

onchange - When a user selects a dropdown value

onfocus - When an input field gets focus

onselect - When input text is selected

onsubmit - When a user clicks the submit button

onreset - When a user clicks the reset button

onkeydown - When a user is pressing/holding down a key

onkeypress - When a user is pressing/holding down a key

onkeyup - When the user releases a key

onkeyup - When the user releases a key

onkeydown vs onkeyup - Both

Mouse Events

onmouseover/onmouseout - When the mouse passes over an element

onmousedown/onmouseup - When pressing/releasing a mouse button

onmousedown - When mouse is clicked: Alert which element

onmousedown - When mouse is clicked: Alert which button

onmousemove/onmouseout - When moving the mouse pointer over/out of an image

onmouseover/onmouseout - When moving the mouse over/out of an image

onmouseover an image map

Click Events

Acting to the onclick event

onclick - When button is clicked

ondblclick - When a text is double-clicked

Load Events

onload - When the page has been loaded

onload - When an image has been loaded

onerror - When an error occurs when loading an image

onunload - When the browser closes the document

onresize - When the browser window is resized

Others

What is the keycode of the key pressed?

What are the coordinates of the cursor?

What are the coordinates of the cursor, relative to the screen?

Was the shift key pressed?

Which event type occurred?

Examples explained