绑定事件处理程序属性onclick 2次使用JavaScript

Question

我是JavaScript的初学者，目前正在阅读Thomas A. Powell，Fritz Schneider 的 The Complete Reference 3rd Edition。 我引用了同一本书的摘要。

作者将为此提供一个解决方案，如下所示：

<p id="p1">Please click me!</p>

<script>

function addEvent(obj,event,handler) {

    var oldHandler = obj[event];
    if (typeof obj[event] != "function")
    {
        obj[event] = handler;
    }
    else
    {
        obj[event] = function () {
        if (oldHandler) { oldHandler.apply(); }
        handler.apply();
   }
  }
}

var el = document.getElementById("p1");

function click1() { alert("First click handler"); }
function click2() { alert("Second click handler"); }

addEvent(el,"onclick",click1);
addEvent(el,"onclick",click2);


</script>

作为JavaScript世界的新手，我尝试调试它以使其更好地为我自己解释。当控件进入 函数addEvent 中的addEvent(el,"onclick",click1);时，我注意到（此时我还没有点击该段落）， obj [event] 将自己设置为 click1 ;然后控制超出了功能。

对于第二次调用相同功能， 变量oldHandler 仍然是旧值（在第一次调用中分配给它） = obj [event] = click1 。那么，是因为闭包的概念还是我错过了什么？请帮助！

Answer 1

每次调用addEvent都会用包装函数覆盖前一个处理程序。每个包装器函数都会覆盖旧包装器，每个包装器都会保存对旧包装器的引用，并在调用提供的处理程序之前调用它。这允许您堆叠许多包装器，一个在另一个上面，每个处理程序调用前一个包装器，然后是newset提供的处理程序。每个函数都通过闭包保持其状态。

但不再需要这样做。在现代浏览器中，您只需使用不会覆盖其他处理程序的addEventListener。