Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Example
Below example will illustrate 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 fires in above example, using developer tools ?
- First, open Developer Tools (Ctrl + Shift + I) and go to the Sources tab.
- Expand the Event Listener Breakpoints section on the right side.
- Check the Mouse category to monitor mouse events.
- Click the button to trigger the event - the debugger will pause and highlight the fired event.
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 Elements tab.
- Click the tag on which event is used.
- After that click the Event Listeners tab below
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 show the JavaScript event that is fired ?
- Right-click on the button element and select Inspect Element.
- In the Elements tab, the button element will be highlighted.
- Look for the Event Listeners tab in the right panel (next to Styles).
- Click it to see all events attached to the selected element.
Programmatic Method: Event Object
You can also identify events programmatically by logging the event object ?
<!DOCTYPE html>
<html>
<body>
<button id="myBtn">Click me</button>
<script>
document.getElementById('myBtn').addEventListener('click', function(event) {
console.log('Event type:', event.type);
console.log('Event target:', event.target.tagName);
console.log('Event object:', event);
});
</script>
</body>
</html>
Event type: click
Event target: BUTTON
Event object: MouseEvent {type: "click", target: button#myBtn, ...}
Conclusion
You can identify fired JavaScript events using browser Developer Tools (Sources tab with Event Listener Breakpoints), Inspect Element (Elements tab with Event Listeners panel), or programmatically through the event object. Each method provides different levels of detail for debugging event handling.
16K+ Views
