Sometimes, we want to check whether dynamically attached event listener exists or not with JavaScript.
In this article, we’ll look at how to check whether dynamically attached event listener exists or not with JavaScript.
How to check whether dynamically attached event listener exists or not with JavaScript?
To check whether dynamically attached event listener exists or not with JavaScript, we can get and set the element’s listener attribute.
For instance, we write
export const attachEvent = (
element: Element,
eventName: string,
callback: () => void
) => {
if (element && eventName && element.getAttribute("listener") !== "true") {
element.setAttribute("listener", "true");
element.addEventListener(eventName, () => {
callback();
});
}
};
to get the listener attribute with element.getAttribute("listener").
If it’s set to 'true', then the listener is attached.
Otherwise, we attach it with addEventListener and call setAttribute to set the listener attribute to true.
Then we use it like
attachEvent(domElement, "click", listenerFunc)
by calling it with the element, event name, and event handler function.
Conclusion
To check whether dynamically attached event listener exists or not with JavaScript, we can get and set the element’s listener attribute.
