嘿，这个需求我之前在调试页面的时候刚好折腾过，给你一步步拆解怎么实现：

首先得明确：getEventListeners(object)是Chrome DevTools专属的API，不属于标准JavaScript，所以只能在Chrome控制台、Chrome扩展或者允许调用该API的环境（比如用户脚本）里使用，普通网页代码没法直接用哦。

步骤1：获取目标元素的事件监听器 #

先选中你要操作的DOM元素，比如通过选择器获取：

// 替换成你的目标元素选择器
const targetEl = document.querySelector('#your-button');
// 获取该元素的所有事件监听器
const elementListeners = getEventListeners(targetEl);

步骤2：提取点击事件的监听器列表 #

getEventListeners返回的对象是以事件类型为key的，比如click、mouseover等，我们直接取出click对应的监听器数组：

// 如果该元素没有绑定click监听器，就返回空数组避免报错
const clickListeners = elementListeners.click || [];

步骤3：遍历并触发每个监听器 #

每个监听器对象里的handler属性就是实际的事件处理函数，我们需要绑定正确的上下文（也就是目标DOM元素），并且传入一个模拟的鼠标事件对象（避免有些处理函数依赖event参数报错）：

clickListeners.forEach(listener => {
  // 模拟一个贴近真实点击的MouseEvent
  const mockClickEvent = new MouseEvent('click', {
    bubbles: true,
    cancelable: true,
    view: window,
    clientX: 100, // 可以根据需要添加更多事件属性
    clientY: 200
  });

  // 绑定目标元素为this上下文，执行处理函数
  listener.handler.call(targetEl, mockClickEvent);
});

额外注意事项 #

• 如果是React、Vue这类框架的合成事件，直接触发handler可能不如调用targetEl.dispatchEvent(mockClickEvent)来得更贴近真实用户操作，但后者是触发整个事件流，而我们这里是直接执行监听器函数，按需选择即可。
• 有些监听器可能设置了捕获阶段（useCapture: true），上面的模拟事件已经开启了冒泡，一般能覆盖大部分场景，如果需要单独处理捕获阶段的监听器，可以筛选listener.useCapture为true的项单独触发。
• 不要在生产环境依赖getEventListeners，因为它不是标准API，兼容性极差。

内容的提问来源于stack exchange，提问作者Mussé Redi