How to trigger events in JavaScript ?

Last Updated : 27 Sep, 2024

JavaScript is a high-level, interpreted, dynamically typed client-side scripting language. While HTML is static and defines the structure of a web page, JavaScript adds interactivity and functionality to HTML elements. This interaction is facilitated through events, which are actions or occurrences that happen in the browser, such as user interactions.

What is an Event?

An event is an interaction between JavaScript and HTML. Common HTML events include:

onload: Triggered when the browser finishes loading a page.
onchange: Triggered when the value of an HTML element changes.
onclick: Triggered when an HTML element is clicked.
onmouseover: Triggered when the mouse hovers over an HTML element.
onmouseout: Triggered when the mouse moves out of an HTML element.

Handling Events in JavaScript

Events can be handled in two main ways:

Using the addEventListener() Method: This method attaches an event handler to an element.
Triggering Events on Individual Elements: Specific JavaScript functions can be defined to handle events for individual elements.

Using document.addEventListener() Method

Syntax:

document.addEventListener(event, function, phase);

Example 1: This example uses the document.addEventListener() method to trigger events in Javascript.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport">     <title>Document</title> </head>  <body>     <h3>Click on the page to         trigger click event</h3>     <h3>Click on the page to         trigger mouseover event</h3>     <h3>Click on the page to         trigger mouseoutevent</h3>      <script type="text/javascript">         document.addEventListener("click",             function () {                 alert("You clicked inside the document");             });          document.addEventListener("mouseover",             function () {                 document.body.style.backgroundColor = "lavender";             });          document.addEventListener("mouseout",             function () {                 document.body.style.backgroundColor = "white";             });     </script> </body>  </html>

Output

Explanation:

When the mouse moves over the document, the background color changes to lavender.
When the mouse leaves the document, the background color reverts to white.
Clicking anywhere in the document triggers an alert.

Example 2: Triggering events on individual elements.

HTML

<!DOCTYPE html> <html lang="en">  <head>     <meta charset="UTF-8">     <meta name="viewport">     <title>Document</title> </head>  <body>     <button onclick="clickFunction()">         Click Me     </button>     <br><br>      <div class="container" id="myDiv"           onmouseenter="enterFunction()"           onmouseleave="leaveFunction()">         Hello World...How are you     </div>      <script type="text/javascript">         function clickFunction() {             document.body.style                 .backgroundColor = "pink";         }          function enterFunction() {             document.getElementById("myDiv")                 .style.border = "1px solid black";         }          function leaveFunction() {             document.getElementById("myDiv")                 .style.border = "2px solid blue";         }     </script> </body>  </html>

Output: