JavaScript DOM Events

Total
0
Shares

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

Leave a Reply

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

You May Also Like

Java vs JavaScript Which is better?

Table of Contents Hide Java vs JavaScript:What is Java?What is JavaScript?Major similarities in Java and JavaScript:Object-Oriented Language (OOP):Browser-Compatibility:Java Vs JavaScript: what’s different?Java:JavaScript:Significant Names that use Java:Active celebs that use JavaScript:Final…
View Post