如何裝飾DO​​M節點的事件處理程序？

Question

如何裝飾DO​​M節點，以便添加事件處理程序，但是在新處理程序中可以調用先前的處理程序？

Answer 1

當然，這取決於您如何添加處理程序，但是這是一種老式的方式：

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

您的處理程序函數將檢查其參數以查看其是否不為null。

您當然可以按照自己的意願來這里。 請注意，大多數Javascript框架實際上並沒有為事件處理程序提供有關其他處理程序的大量信息。 通常，使用這種關系是一種脆弱的模式，但是我想，如果您采用的是規范化處理程序設置的設計，那么它可以很好地工作。

Answer 2

我假設您以element.onclick = function () {};的方式綁定事件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'); });

在此處檢查以上示例。