Sometimes, we want to check if an element has event listener on it with JavaScript.
In this article, we’ll look at how to check if an element has event listener on it with JavaScript.
How to check if an element has event listener on it with JavaScript?
To check if an element has event listener on it with JavaScript, we can call the getEventListeners
function in the Chrome developer console.
For instance, we write
getEventListeners[document.querySelector["your-element-selector"]];
in the Chrome
developer console to select the element we want to check with querySelector
.
And then we call getEventListeners
with the element to get all the event listeners added to the element.
Conclusion
To check if an element has event listener on it with JavaScript, we can call the getEventListeners
function in the Chrome developer console.
Web developer specializing in React, Vue, and front end development.
View Archive
- Remove From My Forums
Question
User1736336400 posted
Is there some way or me to find out if a handler has already been added to an object via $addHandler? I want to be able to check if an object already has a handler before I try and add the same handler [which gives an error]. I don't see a way to do this in the client reference. Right now i am just calling $removeHandler within a try/catch before calling $addHandler, which works but is very hacky.
Answers
User-2017008401 posted
Right now i am just calling $removeHandler within a try/catch before calling $addHandler, which works but is very hacky.
Hi GeorgeP,
Based on my research, there is no build-in function to check if a handler has been added [$addHandler] to an element already. $addHandler is the shortcut of “Sys$UI$DomEvent$addHandler” function, which uses “element.addEventListener” or “element.attachEvent” to add event handler. Following is code snippet of the “Sys$UI$DomEvent$addHandler” function.
if [element.addEventListener] {
browserHandler = function[e] {
return handler.call[element, new Sys.UI.DomEvent[e]];
}
element.addEventListener[eventName, browserHandler, false];
}
else if [element.attachEvent] {
browserHandler = function[] {
return handler.call[element, new Sys.UI.DomEvent[window.event]];
}
element.attachEvent['on' + eventName, browserHandler];
}If the handler is added by addEventListener, we can query eventListenerList which stores a list of event handlers that are currently registered on an element. However, this functionality is not yet supported by any browser.
Hence, I think currently there is no way better than your workaround for this scenario. I hope the above information is helpful to you.
- Marked as answer by Thursday, October 7, 2021 12:00 AM
To check if event exists on element in jQuery, check for the existing events on the element.
Here, I have set the div −
This is demo text. Click here!
When you click div, then the alert generates which I have set using the div id:
$["#demo"].click[function[] { alert["Does event exists? - "+hasEvents]; }];
You can try to run the following code to check if event exists −
Example
Live Demo
$[document].ready[function[]{ $["#demo"].click[function[] { alert["Does event exists? - "+hasEvents]; }]; var events = $._data[document.getElementById['demo'], "events"]; var hasEvents = [events != null]; }];This is demo text. Click here!
Updated on 19-Jun-2020 12:47:44
- Related Questions & Answers
- How to check if onClick exists on element in jQuery?
- How to check if element exists in the visible DOM?
- How to check if Element exists in c# Selenium drivers?
- Check if a particular element exists in Java LinkedHashSet
- How to check the element type of an event target with jQuery?
- Java Program to check if a particular element exists in HashSet
- Check if element exists in list of lists in Python
- How to check if an element has a class in jQuery?
- How to check if a MySQL database exists?
- How to find if element exists in document - MongoDB?
- Check if MongoDB database exists?
- How to check if a variable exists in JavaScript?
- How to check if a column exists in Pandas?
- How to check if a file exists in Golang?
- How do I check if an element is hidden in jQuery?