油猴脚本中addEventListener无法绑定div元素问题咨询

首先你的代码里有个致命问题：当执行button.outerHTML = button.outerHTML时，页面上的原div元素会被全新的DOM元素替换，而你之前用getElementById获取的button变量，指向的是已经被移除出DOM树的旧元素。这时候给旧元素添加事件监听器，自然不会有任何效果——因为旧元素已经不在页面上了。

哪怕你移除了重置outerHTML的代码，还是绑定失败的话，可能涉及这两个点：

1. 油猴脚本的运行时机 #

默认油猴脚本在document-end阶段运行，但如果目标div是页面通过JS动态渲染出来的（哪怕你觉得它“已存在”），脚本执行时元素可能还没被创建。解决方法是在脚本开头指定运行时机为document-idle，确保页面完全加载后再执行：

// ==UserScript==
// @name         绑定div点击事件
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  给指定div绑定点击事件
// @author       You
// @match        你的目标页面URL
// @run-at       document-idle
// @grant        none
// ==/UserScript==

2. 修正后的绑定代码 #

如果一定要重置outerHTML清除原有事件，记得重置后重新获取新的DOM元素再绑定监听器：

var button = document.getElementById("button");
if (button) {
  // 重置outerHTML清除原有事件
  button.outerHTML = button.outerHTML;
  // 重新获取页面上的新元素
  button = document.getElementById("button");
  // 绑定点击事件
  button.addEventListener("click", function() {
    window.alert("ping");
  }, false);
}

如果不需要清除原有事件，直接简化代码即可：

var button = document.getElementById("button");
if (button) {
  button.addEventListener("click", function() {
    window.alert("ping");
  }, false);
}

另外，如果你怀疑作用域问题，可以试试直接给元素设置onclick属性（这种方式会覆盖原有onclick事件，但能避开沙箱可能的影响）：

button.onclick = function() {
  window.alert("ping");
};

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