JavaScript DOM Events

JavaScript DOM events

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 JavaScript DOM events.

Today, We are going to learn about JavaScript 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 clicking on it.

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


Event Attributes:

For 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 clicking on the button.

<!DOCTYPE html>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

function displayDate() {
  document.getElementById("demo").innerHTML = Date();

<p id="demo"></p>



onload and onunload Events:

onload and on unload events triggered when a user enters or leaves the page. These kinda events are 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

See you there 🙂


Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like
JavaScript DOM Selectors

JavaScript DOM Selector

Table of Contents Hide JavaScript DOM Selector: JavaScript DOM Selector: Using JavaScript DOM Selector we can select, manipulate and edit the different types of text. We have different DOM selectors…
View Post