如何编程判断元素点击是否触发JS事件及调试断点配置

我希望了解事件触发后客户端发生的数据变更，但无法定位事件触发逻辑。现有页面包含两个绑定了事件的按钮：

<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>

我可以通过JavaScript代码document.getElementsByTagName("button")[0].onclick查看第一个按钮点击时的执行逻辑，但该方法对第二个按钮无效。
请问：如何在不点击按钮的情况下判断元素点击是否会触发事件？
另外，能否配置浏览器调试器，在不明确触发事件类型的情况下，在下一个关键事件发生时触发断点？

一、不点击按钮判断元素是否绑定点击事件 #

• 对于内联绑定的事件（如第一个按钮的onClick属性），直接通过元素的onclick属性即可获取执行逻辑：

  document.getElementsByTagName("button")[0].onclick
  

  控制台会返回对应的函数内容。
• 对于通过addEventListener绑定的事件（第二个按钮的方式），浏览器调试控制台提供了getEventListeners方法，专门用来查看元素绑定的所有事件：

  getEventListeners(document.getElementById('x')).click
  

  执行后会返回一个数组，包含该元素所有绑定的click事件处理器，你可以查看每一项的listener属性来看到具体的执行逻辑。

  注意：getEventListeners是Chrome、Edge等主流浏览器的调试专属API，不属于ECMAScript标准，但日常调试完全够用。

二、配置浏览器调试器触发全局事件断点 #

可以通过浏览器开发者工具的事件监听器断点功能实现，操作步骤如下：

1. 按下F12打开开发者工具，切换到Sources面板；
2. 在左侧面板找到Event Listener Breakpoints选项并展开；
3. 如果你不确定具体事件类型，可以：
   • 勾选顶层的类别（比如Mouse、Keyboard），这样该类别下的所有事件触发时都会自动断住；
   • 直接勾选All breakpoints，所有类型的事件触发时都会触发断点；
4. 之后页面触发任意符合勾选条件的事件时，调试器会自动暂停，你可以通过调用栈查看事件触发的逻辑链路，进而追踪数据变更。

内容的提问来源于stack exchange，提问作者90ueiomtn