How can I programmatically determine if an Event will execute JavaScript

Question

I am trying to understand data mutations that are occurring client-side after an event is triggered, but I cannot locate the event triggering logic. Given the following page, I have created two buttons which have events bound:

<html>

<button onClick="console.log('Inline button clicked')">Inline Button</button>
<button id="x">Bound Button</button>

<script>

document.getElementById("x").addEventListener("click", (event) => { 
    console.log("JS Bound clicked")
});
</script>
</html>

I can determine what will occur when the following button is clicked with the JavaScript document.getElementsByTagName("button")[0].onclick, however this does not work for the second.

How can I determine if clicking on an element will trigger an event without clicking on the button.

As an extension, is it possible to configure a browser debugger to break on the next (significant) event, without knowing which event will be triggered?

JWittmeyer · Accepted Answer · 2024-06-28 10:47:29Z

2

getEventListeners(document.getElementById("x")) usually gives you the event Listeners registered to your dom element. In most cases this should give you a reliable check for what is executed.

That said there are some edge cases you might want to consider depending on your app/design.

CSS has the option to disable pointer events. There would still be an event listener registered but when you click on the element nothing happens. (could be a class or style property so best to check the computedStyle)
Clicking somewhere on the app doesn't have to trigger just one event (or better just the events from one element) & events can bubble through a dom tree.

I can't answer the second part with certainty for your case but I usually use debugger; hardcoded everywhere where the event might occur + some if logic (e.g. via Event type) & then step through the event bubbles. You could also create a conditional breakpoint e.g. for chrome which is basically the same as a hardcoded version with if.

answered Jun 28, 2024 at 10:47

JWittmeyer

1657 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chuck Terry Over a year ago

Good solution. Just be aware that it shouldn't be used in production as it really only works with Chromium browsers. One big drawback is sifting through all the events added by frameworks. On the second bit, I usually use Event Listener Breakpoints attached through the Sources Panel in DevTools :)

Collectives™ on Stack Overflow

How can I programmatically determine if an Event will execute JavaScript

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related