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?