How to trigger events in JavaScript ? Last Updated : 27 Sep, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 JavaScriptEvents 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() MethodSyntax: 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> OutputExplanation: 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:Explanation:When the button is clicked, the background color of the webpage changes to light green.When the mouse enters the myDiv container, its border changes to black.When the mouse leaves the myDiv container, its border reverts to blue. Comment More infoAdvertise with us Next Article How to Add event listener to Button in JavaScript ? S Shreyasi_Chakraborty Follow Improve Article Tags : Technical Scripter JavaScript Web Technologies Technical Scripter 2020 JavaScript-Questions +1 More Similar Reads Timing Events in Javascript Timing events are the events that help to execute a piece of code at a specific time interval. These events are directly available in the HTML DOM (Document Object Model) Window object, i.e., they are present in the browser. So, these are called global methods and can be invoked through the 'window' 5 min read How to Handle JavaScript Events in HTML ? An Event is an action or occurrence recognized by the software. It can be triggered by the user or the system. Mostly Events are used on buttons, hyperlinks, hovers, page loading, etc. All this stuff gets into action(processed) with the help of event handlers. In this article, you will learn about d 3 min read How to use events in ReactJS ? Modern webpages rely on user interactions, triggering events like clicks or keypresses. React facilitates event handling with built-in methods, allowing developers to create listeners for dynamic interfaces and responses. JavaScript events, inherent to the DOM, use bubbling propagation by default, m 2 min read How to Add event listener to Button in JavaScript ? In web development adding an event listener to a button is a common task that allows us to execute JavaScript code in response to user interactions, such as clicks. This helps us to create interactive and flexible web pages. Using addEventListener()The addEventListener method is a versatile and wide 1 min read JavaScript onmouse Events The onmouse event is used to define the operation using the mouse. JavaScript onmouse events are: onmouseover and onmouseoutonmouseup and onmousedownonmouseenter and onmouseleave JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over s 1 min read JavaScript Trigger a button on ENTER key To trigger a button click on pressing the ENTER key in JavaScript, you can add an event listener for the keypress or keydown event on an input field. The button's click event is programmatically triggered when the ENTER key (key code 13) is detected.Table of ContentUsing keyup() event:Using keydown( 3 min read Like