如何装饰DO​​M节点的事件处理程序?

时间:2010-06-10 16:13:57

标签: javascript events dom javascript-events decorator

如何装饰DO​​M节点以便添加事件处理程序,但在新处理程序中可以调用前一个处理程序?

2 个答案:

答案 0 :(得分:0)

这取决于你如何添加处理程序,当然,这是一种老式的方式:

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

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

你当然可以像在这里一样喜欢它。请注意,大多数Javascript框架实际上并没有为您的事件处理程序提供有关其他处理程序的大量信息。一般来说,使用这种关系是一种脆弱的模式,但我想如果你开始使用一种设计来规范处理程序设置,它可以正常工作。

答案 1 :(得分:0)

我假设您以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