Skip to content
Related Articles

Related Articles

How to trigger events in JavaScript ?
  • Last Updated : 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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :