The HTML DOM allows JavaScript to react to HTML events such as mouse clicks, page loads, image loads, mouse movements, input field changes, form submissions, and key presses.

Reacting to Events

JavaScript can be executed when an event occurs, like 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 using the onclick event.

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 presses a key

Example: Changing Content on Click

In this example, the content of the <h1> element is changed when a user clicks on it:

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>

Example: Calling a Function from an Event Handler

In this example, a function is called when the event occurs:

<!DOCTYPE html>
<html>
<body>

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

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

</body>
</html>

‍

HTML Event Attributes

You can assign events to HTML elements using event attributes.

Example: Assigning an onclick Event to a Button

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

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

Assign Events Using the HTML DOM

You can also assign events to HTML elements using JavaScript:

Example: Assigning an onclick Event to a Button

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

‍

In the example above, the displayDate function is assigned to an HTML element with the id "myBtn". The function will be executed when the button is clicked.

The 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 check the visitor's browser type and version, and load the appropriate version of the web page. These events can also be used to manage cookies.

Example:

<body onload="checkCookies()">

‍

The oninput Event

The oninput event triggers an action while the user inputs data. Here is an example of using oninput to change the content of an input field:

Example:

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

‍

The onchange Event

The onchange event is often used for validating input fields. Here is an example of using onchange to call the upperCase() function when the content of an input field changes:

Example:

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

‍

The onmouseover and onmouseout Events

These events trigger a function when the user moves the mouse over or out of an HTML element:

<p onmouseover="mouseOverFunction()" onmouseout="mouseOutFunction()">Mouse Over Me</p>

‍

The onmousedown, onmouseup, and onclick Events

These events are parts of a mouse click sequence. When a mouse button is clicked, the onmousedown event is triggered. When the button is released, the onmouseup event is triggered. When the click is completed, the onclick event is triggered.

<button onmousedown="mouseDownFunction()" onmouseup="mouseUpFunction()" onclick="clickFunction()">Click Me</button>‍

More Examples:

onmousedown and onmouseup: Change an image when the mouse button is held down.
onload: Display an alert 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 cursor moves over it.

HTML DOM Event Object Reference

For detailed information on event properties and methods, refer to the complete HTML DOM Event Object Reference.

‍

Take a look into your desired course