JavaScript HTML DOM Event

HTML DOM allows JavaScript to react to HTML events:

Mouse Over!
Click Me

React to events

JavaScript can execute when an event occurs, such as when a user clicks an HTML element.

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

onclick=JavaScript

Example of HTML event:

  • When the user clicks the mouse
  • when the web page is loaded
  • when the image is loaded
  • when the mouse is over the element
  • when the input field is changed
  • when the HTML form is submitted
  • when the user presses a key

In this example, when the user clicks <h1> the content will be changed:

Example

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Click on this text!</h1>
</body>
</html>

Try It Yourself

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

Example

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Try It Yourself

HTML Event Attributes

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

Example

to the button element onclick Event:

<button onclick="displayDate()">Try It</button>

Try It Yourself

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

Assigning Events Using HTML DOM

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

Example

to specify onclick Event:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Try It Yourself

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

the function will be executed when the button is clicked.

when the user enters and leaves the page.

The onload and onunload events are triggered onload and onunload events.

onload events can be used to detect the visitor's browser type and version, and then load the appropriate version of the web page based on this information.

onload and onunload events can be used to handle cookies.

Example

<body onload="checkCookies()">

Try It Yourself

onchange event

onchange events are often used in conjunction with input field validation.

Below is an example of how to use onchange This example calls the upperCase() function when the user changes the content of the input field.

Example

<input type="text" id="fname" onchange="upperCase()">

Try It Yourself

onmouseover and onmouseout events

onmouseover and onmouseout The event can be used to trigger a function when the user moves the mouse over or out of an HTML element:

Mouse Over!

Try It Yourself

onmousedown, onmouseup, and onclick events

onmousedown, onmouseup and onclick The event makes up the complete mouse click event.

First when the mouse button is clicked,onmousedown The event is triggered; then when the mouse button is released,onmouseup The event is triggered; finally, when the mouse click is completed,onclick The event is triggered.

Click Me

Try It Yourself

More Examples

onmousedown and onmouseup
Change the image when the user presses the mouse button.
onload
Display an alert box when the page is completely loaded.
onfocus
Change the background color of the input field when it gains focus.
Mouse Events
Change the color of the element when the pointer moves over it.

HTML DOM Event Object Reference Manual

For a complete list of all HTML DOM events, please visit our full HTML DOM Event Object Reference Manual.