JavaScript HTML DOM Events
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 <pre style="display: inline;"><h1></pre> 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.
