How to trigger events in JavaScript ? - GeeksforGeeks

03 Dec, 2020
Javascript is a high level, interpreted, dynamically typed client side scripting language. HTML is static and Javascript is used to add functionality to static HTML code. HTML events are handled by JavaScript. When an event occurs, it requires some action to be taken. This action can be accomplished through JavaScript event handlers. In addition to JavaScript, jQuery which is equivalent to JavaScript in terms of functionality can also be used to trigger events in a HTML document. In order to work on JavaScript trigger events, it is important to know what is an event. An event is an interaction between JavaScript and HTML. Some common HTML events are as follows:
onload: It is triggered when the browser completes loading a page
onchange: It is triggered when an HTML element changes.
onclick: It is triggered when an HTML element is clicked.
onmouseover: It is triggered when the mouse is moved over a HTML element.
onmouseout: It is triggered when the mouse is moved out of a HTML element.
Events can be handled either through addEventListener() method or we can trigger events on individual components by defining specific JavaScript functions. Let us consider the following examples:
Using document.addEventListener() method
Syntax : 
document.addEventListener(event, function, phase)
Parameters:
event: Mandatory parameter. Specifies the name of the event. 
function: Mandatory parameter. Specifies the function that is supposed to handle the event.
phase: This is an optional parameter and accepts a boolean value. If true value is passed then the event handler is executed in the capturing phase and if false value is passed then the event handler is executed in the bubbling phase. If an element is a child element and it triggers an event then the event is registered for both the parent and child element. If the phase value is passed as true then the event handler is first executed by the parent element (capturing phase) and if false is passed then the child element executes the event handler first. By default, false is passed as the phase value.
Example 1:
HTML
<!DOCTYPE html><html>  <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
Trigger mouseover Event:
Trigger mouseout Event:
Trigger click Event:
Explanation: In this example, when the mouse is moved over the document the background color of the document changes to lavender. When the mouse is moved out the background color of the document changes back to white. And when the user clicks anywhere inside the document an alert pops up. These actions are handled by event handlers that is triggered when an event occurs.
Example 2: Triggering events on individual elements
HTML
<!DOCTYPE html><html>  <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:
Click on Button:Mouse move over the page
Explanation Here individual elements in the HTML document trigger different events and those events invoke different JavaScript functions. The logic to handle the events are specified in the functions. When the button is clicked, it changes the background color of the webpage. The other events that are handled are mouseenter and mouseleave. When the mouse enters the container with id named myDiv the border of the division turns black. When the mouse leaves the container the border of the division turns blue.
HTML-Misc
JavaScript-Misc
Picked
Technical Scripter 2020
HTML
JavaScript
Technical Scripter
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to calculate the number of days between two dates in javascript?