JavaScript `HTML DOM Events`

HTML DOM allows JavaScript to react to HTML events.

Example

Mouse Over Me
Click Me

Reacting 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:

Examples of HTML events:

When a user clicks the mouse
When a web page has loaded
When an image has been 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 keypress

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

Example

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

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 the text!</h1>
</body>
</html>

HTML Event Attributes

To assign an event to an HTML element, you can use event attributes.

Example

Assign an onclick event to a button element:

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

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

Using HTML DOM to Assign Events

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

Example

Assign an onclick event to a button element:

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

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 browser type and browser version, and load the proper version of the web page based on the information.

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

Example

<body onload="checkCookies()">

onchange Event

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

Here is an example of how to use the onchange event. The upperCase() function will be called when the content of the input field is changed.

Example

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

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:

Mouse Over Me

onmousedown, onmouseup, and onclick Events

The onmousedown, onmouseup, and onclick events are all parts of a mouse-click sequence. First, the onmousedown event is triggered when the mouse button is pressed, then the onmouseup event is triggered when the mouse button is released, and finally, the onclick event is triggered when the mouse-click is completed.