点击HTML按钮会触发什么逻辑？如何查看对应事件代码并在控制台执行？

操作步骤 #

• 第一步：定位目标元素
  按F12打开浏览器开发者工具，右键点击目标按钮选择「检查」，即可在元素（Elements）面板选中对应的按钮DOM元素。
• 第二步：查看绑定的事件代码
  选中元素后，在开发者工具右侧栏找到「事件监听器（Event Listeners）」标签，展开后找到click分类，就能看到该按钮上绑定的所有点击事件回调，点击回调函数旁的跳转标识可直接定位到源码位置。
• 第三步：控制台执行对应逻辑
  如果你只是要触发点击效果，不需要提取代码，选中元素后直接在控制台输入$0.click()即可执行完整的点击逻辑，$0是开发者工具默认指向最近选中元素的变量。
  如果你要单独执行回调内的代码，可以通过以下方法获取回调函数：

  // 获取选中元素的所有点击监听器
  const clickHandlers = getEventListeners($0).click
  // 执行第一个绑定的点击回调
  clickHandlers[0].listener()
  

示例说明 #

你给出的按钮事件绑定代码如下：

document.getElementById("myBtn").addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

你也可以直接在控制台执行回调内的逻辑，不用触发按钮点击：

document.getElementById("demo").innerHTML = "Hello World";

注意：如果事件是通过事件委托绑定在父/祖先元素上的，你直接触发目标元素的点击即可自动触发委托的事件逻辑，不需要额外找父元素的回调。

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