如何装饰 DOM 节点的事件处理程序？答案

【问题标题】：How to decorate a DOM node's event handler?如何装饰 DOM 节点的事件处理程序？
【发布时间】：2011-03-02 06:27:42
【问题描述】：

如何装饰一个 DOM 节点以便添加一个事件处理程序，但在新的处理程序中可以调用之前的处理程序？

【问题讨论】：

标签： javascript events dom javascript-events decorator

【解决方案1】：

我假设您正在以element.onclick = function () {}; 的方式绑定事件。

是的，您可以创建一个函数来包装以前的事件处理程序并按顺序执行它们，例如：

function addEvent(el, event, handler) {
  var oldEvent = el['on'+event];
  if (typeof oldEvent != 'function') {
    el['on'+event] = handler;
  } else {
    el['on'+event] = function() {
      oldEvent();
      handler();
    }
  }
}

var el = document.getElementById('el');
addEvent(el, 'click', function () { alert('1'); });
addEvent(el, 'click', function () { alert('2'); });

查看上面的例子here。

【讨论】：

【解决方案2】：

当然，这取决于您添加处理程序的方式，但这是一种老式的方式：

function addClickHandler(nodeId, handler) {
  var node = document.getElementById(nodeId), old = node.onclick;
  node.onclick = function() {
    handler(old);
  }
}

你的处理函数会检查它的参数，看看它是否不为空。

您当然可以在这里尽情享受。请注意，大多数 Javascript 框架实际上并没有为您的事件处理程序提供有关其他处理程序的太多信息。一般来说，处理这种关系是一种脆弱的模式，但我想如果你着手设计一个规范化处理程序设置的设计，它可以正常工作。

【讨论】：