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

Question

如何装饰DO​​M节点，以便添加事件处理程序，但是在新处理程序中可以调用先前的处理程序？

Answer 1

It depends on how you're adding your handlers, of course, but here's one old-fashioned way:

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

Your handler function would check it's parameter to see if it's not null.

You could of course get as fancy as you wanted to here. Note that most Javascript frameworks actually don't give your event handlers much information about other handlers. Generally it's a fragile pattern to work with that sort of relationship, but I suppose if you set out with a design that regularizes tthe handler setup, it could work fine.

Answer 2

I assume that you are binding events in the way element.onclick = function () {}; .

Yes, you can make a function that wraps previous event handlers and execute them sequentially, eg:

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'); });

Check the above example here .