Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

Event Firing in JavaScript

  • Last Updated : 08 Jan, 2021

What are Events?

Events are actions or occurrences that happen in the system where we do programming, which the system tells you about so that we can respond to these events in some way if desired. For example, if the user selects a button on a webpage, one might want to respond to that action by displaying a dialog box.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Understanding the basics of Events:

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <button class="first">Button 1</button>
    <button class="second">Button 2</button>
    <button class="third">Button 3</button>
  
    <script>
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', ()=>{
            console.log("Button 1 is Clicked");
        });
        secondBtn.addEventListener('click', ()=>{
            console.log("Button 2 is Clicked");
        });
  
        thirdBtn.addEventListener('click', ()=>{
            console.log("Button 3 is Clicked");
        });
  
    </script>
</body>
  
</html>

Output:

Button 1 is Clicked
Button 2 is Clicked
Button 3 is Clicked

When button 1 is clicked, we get the output in the console as Button 1 is Clicked and similarly depending on the button which is clicked. Here we have an event handler that is associated with the button which looks for the click event.



In JavaScript, we have an event object which has all the information associated with the event which can be used to find out which event is being fired. Consider the example above and now we make the following modifications.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <button class="first">Button 1</button>
    <button class="second">Button 2</button>
    <button class="third">Button 3</button>
  
    <script>
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
  
        secondBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
  
        thirdBtn.addEventListener('click', (e)=>{
            console.log(e.target);
        });
    </script>
</body>
</html>

Output:

Button 1
Button 2
Button 3

We have passed in the event object as a parameter to the function which is to be executed when the event is fired. The target attribute tells us the element that fires the event hence we get our desired answer. This is how we can use the event object in JavaScript to know which element is fired or what type of element is being fired.

If we replace the e.target with just e we would get the event object as the output that can be used to extract any information about the event.

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <button class="first">Button 1</button>
    <button class="second">Button 2</button>
    <button class="third">Button 3</button>
  
    <script>
        const firstBtn = document.querySelector(".first");
        const secondBtn = document.querySelector(".second");
        const thirdBtn = document.querySelector(".third");
  
        firstBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
  
        secondBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
  
        thirdBtn.addEventListener('click', (e)=>{
            console.log(e.type);
        });
    </script>
</body>
  
</html>

Output:

click
click
click



My Personal Notes arrow_drop_up
Recommended Articles
Page :