JavaScript HTML DOM Events

HTML DOM enables JavaScript to react to HTML events.

Examples

Mouse Over Me
Click Me

React to Events

We can execute JavaScript when an event occurs, such as 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:

onclick=JavaScript

Examples of HTML events:

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

In this example, when the user clicks on the <h1> element, its content changes:

Examples

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

Try it Yourself »

This example calls a function from the event handler:

Examples

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click the text!</h1>
</body>
</html>

Try it Yourself »

HTML Event Attributes

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

Examples

Assign an onclick event to a button element:

<button onclick="displayDate()">Click here</button>

Try it Yourself »

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

Assign Events Using HTML DOM

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

Examples

Assign an onclick event to a button element:

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

Try it Yourself »

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

The JavaScript function will be executed when the button is clicked.

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 detect the visitor's browser type and browser version, and load the proper version of the webpage based on this information.

The onload and onunload events can be used to handle cookies.

Examples

<body onload="checkCookies()">

Try it Yourself »

onchange Event

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

Below is an example of how to use onchange. When the user changes the content of an input field, the upperCase() function is called.

Examples

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

Try it Yourself »

onmouseover and onmouseout Events

The onmouseover and onmouseout events can be used to trigger functions when the user's mouse moves over or out of an HTML element.

Examples

A simple onmouseover-onmouseout example:

Mouse Over Me

Try it Yourself »

onmousedown, onmouseup and onclick Events

onmousedown, onmouseup, and onclick constitute all parts of a mouse click event. First, when the mouse button is clicked, the onmousedown event is triggered; when the mouse button is released, the onmouseup event is triggered; finally, when the mouse click is completed, the onclick event is triggered.

Examples

A simple onmousedown-onmouseup example:

Thank You

More Examples

onmousedown and onmouseup
Replaces an image when the user presses the mouse button.

onload
Display a prompt box when the page has finished loading.

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

Mouse Events
Change the color of an element when the pointer moves over it; when the pointer moves out of the text, change its color again.

Other Extensions