DOM Events


JavaScript HTML DOM events


HTML DOM gives JavaScript the ability to react to HTML events.


React to events

We can execute JavaScript when an event occurs, such as when the user clicks on an HTML element.

To execute code when the 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 the page is loaded

  • When the image is loaded

  • When the mouse moves over the element

  • When the input field is changed

  • When submitting an HTML form

  • When the user triggers a key

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

Example

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

 Try It! 

This example calls a function from the event handler:

Example

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

 Try It! 


HTML event attributes

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

Example

Assign the onclick event to the button element:

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

 Try It! 

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


Use HTML DOM to assign events

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

Example

Assign the onclick event to the button element:

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

Try It! 

In the above example, 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 correct version of the web page 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 in conjunction with the validation of input fields.

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

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 user's mouse moves over or out of an HTML element.

Example

A simple onmouseover-onmouseout example:

image.png

Try It! 


onmousedown, onmouseup, and onclick events

onmousedown, onmouseup and onclick constitute all parts of the 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, and finally, when the mouse click is completed, the onclick event is triggered.

Example

A simple onmousedown-onmouseup example:

image.png



More examples

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

onload
displays a prompt box when the page is finished loading.

onfocus
When the input field gets focus, change its background color.

Mouse events
When the pointer moves over the element, its color is changed; when the pointer moves out of the text, its color is changed again.