JavaScript

JavaScript DOM Events

Mom'na J.

March 26, 2021

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.

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.

For more learning about DOM events Read this article HTML DOM Event List