Table of Contents Hide
JavaScript DOM Events:
Hey did you imagine how to collect analytics, views, clicks on the website page?
How to monitor the mouse activity? All things happen due to DOM events.
Today We are going to learn about DOM Events.
Events are the part of Document Object Model (DOM)
For example
- when the page load
- a user clicks the button
- the image has been loaded
- the mouse moves over an element
- the input field is changed, HTML form is submitted
The developer can use these events to execute the JavaScript code.
- Which causes the button to close the window
- the message to be displayed to the user
- data to be validated
Kindly check this article for a better understanding of DOM Events Reference
Let me show you an example of onclick event, content will changes when clicks on it.
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
Event Attributes:
Assign an event to an HTML attribute you can use event attributes.
In this example assign the onclick event to the button element. The function name is displayDate will assign when clicks on the button.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display the date.</p>
<button onclick="displayDate()">The time is?</button>
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
</body>
</html>
onload and onunload Events:
onload and on unload events triggered when a user enters or leaves the page. These kinda events mostly used to deal with cookies.
<body onload="checkCookies()">
onChange Event:
onChange events mostly use in form validation. The example will show you how to use onChange event, the UpperCase function will be called when the user changes the value in the input field.
<input type="text" id="fname" onchange="upperCase()">
For more learning about DOM events Read this article HTML DOM Event List
Momena Suallam