JavaScript同一作用域重复使用"event"关键字导致的事件对象传递异常问题

我太懂你踩的这个坑了！这完全是作用域捕获搞的鬼——你现在传给selectNodeEdit的是外层editExistingEmp函数接收到的那个原始事件对象，而不是新绑定的nodeHandler被点击时产生的新事件。

问题出在哪？ #

你看这段代码：

nodeHandler.addEventListener("click", function() { selectNodeEdit(event); }, false);

这里的event变量没有在匿名函数内部声明，JS会自动往上查找作用域链，结果就找到了外层editExistingEmp(event)里的那个event参数。所以不管你点多少次nodeHandler，传进去的永远是最开始触发editExistingEmp的那个事件，根本不是当前点击的事件。

怎么解决？ #

有两种简单的修复方式，选哪种看你的需求：

方式1：让匿名函数接收自身的事件参数

直接给内部的匿名函数加一个参数（名字随便起，别和外层的event重名更清晰），然后把这个参数传给selectNodeEdit：

// 给内部函数加新的事件参数，比如叫newEvent
nodeHandler.addEventListener("click", function(newEvent) { 
  selectNodeEdit(newEvent); 
}, false);

用箭头函数写会更简洁：

nodeHandler.addEventListener("click", (newEvent) => selectNodeEdit(newEvent), false);

方式2：直接把selectNodeEdit作为事件处理函数

如果selectNodeEdit本身就是用来接收事件对象的，那你完全不需要额外的匿名函数包裹——JS在触发事件时，会自动把当前的事件对象作为第一个参数传给事件处理函数：

nodeHandler.addEventListener("click", selectNodeEdit, false);

这种写法最干净，还能避免不必要的函数嵌套。

举个直观的例子对比 #

错误写法（传外层事件）：

function editExistingEmp(outerEvent) {
  const btn = document.createElement("button");
  btn.textContent = "点击我";
  btn.addEventListener("click", function() {
    console.log(outerEvent.target); // 输出的是触发editExistingEmp的那个元素，不是这个按钮
  });
  document.body.appendChild(btn);
}

正确写法（传自身事件）：

function editExistingEmp(outerEvent) {
  const btn = document.createElement("button");
  btn.textContent = "点击我";
  btn.addEventListener("click", function(innerEvent) {
    console.log(innerEvent.target); // 输出的是当前被点击的按钮
  });
  document.body.appendChild(btn);
}

这样改完，新绑定的事件就能拿到自己对应的事件对象啦！

备注：内容来源于stack exchange，提问作者ColtTheNark