HTML DOM Events


HTML DOM allows JavaScript to react to HTML events.


React to events

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

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

onclick=JavaScript

Example of HTML event:

  • when the user clicks the mouse

  • when the page is loaded

  • when the image is loaded

  • when the mouse moves over the element

  • when the input field is changed

  • When the HTML form is submitted

  • When the user triggers a key

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

Example

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

Try It! 

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

Example

<script>
function changetext(id){
    id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">Click on the text!</h1>

Try It! 


HTML event attributes

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

Example

Assign an onclick event to the button element:

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

Try It! 

In the above example, when the button is clicked, a function called displayDate is executed.


Use the HTML DOM to dispatch events

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

Example

Assign the onclick event to the button element:

document.getElementById("myBtn").onclick=function(){ displayDate() };

Try It! 

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

When the button is clicked, the function will be executed.


onload and onunload events

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

The onload event can be used to check the visitor's browser type and version so that different versions of the web page can be loaded based on this information.

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

Example

<body onload="checkCookies()">

 Try It! 


onchange event

The onchange event is often used for validation of input fields.

The following example shows how to use onchange. The upperCase() function is called when the user changes the content of the input field.

Example

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

Try It! 


onmouseover and onmouseout events

The onmouseover and onmouseout events can be used to trigger functions when the mouse pointer moves over or leaves an element.

Example

A simple onmouseover-onmouseout example:

Try It! 


onmousedown, onmouseup, and onclick events

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

Example

A simple onmousedown-onmouseup example:

Try It! 


HTML DOM Event Object Reference Manual

For a full description and examples of each event, visit our HTML DOM Reference Manual .