Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to find out which JavaScript events fired?
In this tutorial, we will learn how we can find out which JavaScript event is fired or triggered. We can add events to HTML elements to perform some actions on the webpage like changing text, form submission, etc.
There are two ways of finding which JavaScript event is fired −
- Using Developer Tools
- Using Inspect Element
Let us discuss both of them one by one with coding examples.
Using Developer Tools
We can find out which JavaScript event is fired by using developer tools in the browser. To open Developer tools, you need to press ctrl + shift + I; After opening the developer tools follow the below steps −
- Go to the sources tab.
- Click on the Event Listener Breakpoints, on the right side.
- Then perform the activity that will trigger the event, i.e. click if the event that used is click, double click if it is dblclick event.
Steps
- Step 1 − In the first step, we will access the element by its ID on which the event is used and store it in a variable.
- Step 2 − In the next step, we will declare the function that will be called when the particular event is fired.
- Step 3 − In the last step, we will add the functionality to the function that it has to perform on the web page when the event is fired.
Example 1
Below example will illustrates the use of the developer tools method to find out which JavaScript event is fired −
<!DOCTYPE html> <html> <body> <h3>Finding out which JavaScript events fired</h3> <p id="para">Here, we will add event to element and then will see how can we findout it in browser.</p> <button id="btn" onclick="display()">click me!</button> <script> let btn = document.getElementById("btn"); function display() { let para = document.getElementById("para"); para.innerHTML = "<b>Text changed!!!</b>"; } </script> </body> </html>
Let us see how we can find out which JavaScript event is fires in above example, using above steps −
- In first step, we will open Developer Tools and go to the Sources tab as shown below −
- In the next step, we will open Event Listener Breakpoints shown on the right side in the above image, and then click the category of events, Mouse, in this case, then click the button to trigger or fire the event; it will highlight the event that is fired to the right side, as shown in below image −
In above example, we learnt how we can find out the click event that is used on the button tag using the Developer tools method.
Using Inspect Element
This is another method of finding the JavaScript event that is fired. To implement this method first we need to open Inspect by right clicking on the browser, then follow the below steps −
- Go to Elemets tab.
- Click the tag on which event is used.
- After that click the Event Listener tab below
Let us discuss it with a code example −
Algorithm
- Step 1 − In first step, we need to grab the input tag and the element on which we want t add the event by their respective IDs.
- Step 2 − In this step, we will add the event to the element using the addEventListener() method of JavaScript, which takes the event name as a string and a callback function that will be called when event is fired.
- Step 3 − In the last step, we define the callback function and provide the functionality that will performed at the time when event will be fired.
Example
Below example will explain the inspect element method to find out which JavaScript event is fired −
<!DOCTYPE html> <html> <body> <h3>Find out which JavaScript events fired</h3> <p id="para">Here, we will add event to element and then will see how can we findout it in browser.</p> <form id="form"> <input type="text" id="inp"> <button id="btn">Change text</button> </form> <script> let inp = document.getElementById("inp"); let btn = document.getElementById("btn"); btn.addEventListener('click', function (event) { event.preventDefault(); let para = document.getElementById("para"); para.innerHTML = "<b>" + inp.value + "</b>"; } ); </script> </body> </html>
Here’s how this method will tell the JavaScript event that is fired −
- At first, we will open the Inspect element then go to the Elements tab, as shown below −
- As a next step, we will write something in the input box and click the change text button that triggers the event, then manually search and click the tag that contains the event, after that click the Event Listeners tab below to see the event that is fired, below picture will explain everything −
In this example, we have used the click event on the button tag and then see the procedure to find the event that is triggered or fired using the Inspect Element method.
In this tutorial, we have discussed two ways of finding the JavaScript event that is fired or triggered. You can use any JavaScript event in above examples and then try any of the discussed methods to find out the event fired.
11K+ Views
