Javascript 跟踪DOM元素上的EventListener

跟踪DOM元素上的

eventListener

function

s的最佳方法是什么？我是否应该向引用

函数的元素添加如下属性：

var elem = document.getElementsByTagName( 'p' )[0];
function clickFn(){};
elem.listeners = { click: [clickFn, function(){}] };
elem.addEventListener( 'click', function(e){ clickFn(e); }, false );

或者我应该将其存储在代码中自己的变量中，如下所示：

var elem = document.getElementsByTagName( 'p' )[0];
function clickFn(){};
// Using window for the sake of brevity, otherwise I wouldn't =D
// DOM elements and their listeners are referenced here in a paired array
window.listeners = [elem, { click: [clickFn, function(){}] }];
elem.addEventListener( 'click', function(e){ clickFn(e); }, false );

显然，第二种方法不那么突兀，但它似乎可以通过所有这些可能性得到密集的迭代

哪种方法最好？为什么？有更好的方法吗？
考虑到它也被标记为“jQuery”，这是一个有点奇怪的问题

在jQuery中，事件处理程序变得非常简单。您的第一个示例可以改写为以下内容：

function clickFn(){};

$("p:first").click(function(e) {
  clickFn(e)
});

或者我完全误解了这个问题。
正如其他答案所提到的，既然你用jQuery标记了这个问题，那么你试图用这样简单的JavaScript添加和跟踪事件是没有意义的。此外，您似乎这样做的方式并没有真正跟踪任何内容，因为您正在手动向
侦听器
属性添加函数引用，而不依赖于实际将它们分配给元素上的事件处理程序。当您这样做时，无法确保您正在“跟踪”的对象实际上是事件触发时要调用的对象

如果您坚持避免使用jQuery，下面是一个示例，说明如何将多个处理程序添加到多个事件中，并跟踪分配给以后处理哪些事件的函数：

function addTrackedListener(element, type, handler) {
  if (!element.trackedEvents) {
    element.trackedEvents = {};
  }

  if (!element.trackedEvents[type]) {
    element.trackedEvents[type] = [];
  }

  element.trackedEvents[type].push(handler);

  element[type] = function () {
    handleAllEvents(element.trackedEvents[type]);
  };
}


function handleAllEvents(events) {
  for (var i = 0, l = events.length; i < l; i++) {
    events[i]();
  }
}

单击事件激发时，您会在控制台中看到：

first handler
second handler

如果检查
div.trackedEvents
，您将看到每种类型事件的属性，其值将是触发该事件时将执行的所有函数的数组

first handler
second handler