Question

在DOM元素上跟踪eventListener function的最佳方法是什么？我应该向引用function的元素添加属性，如下所示：

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

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

哪种方式最好？为什么？还有更好的方法吗？

Answer 1

正如其他答案所提到的，由于您使用jQuery标记了这个问题，因此您尝试使用像这样的纯JavaScript来添加和跟踪事件是没有意义的。此外，您似乎正在执行此操作的方式并不真正跟踪任何内容，因为您手动向listeners属性添加函数引用，而不是实际将它们分配给元素上的事件处理程序。当你这样做时，没有办法确保你正在“跟踪”的那些实际上是在事件发生时将要调用的内容。

如果您坚持避免使用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]();
  }
}

使用示例：

// grab some element
var div = document.getElementById('test');

// add a click handler to it
addTrackedListener(div, 'onclick', function() {
  console.log('first handler');
});

// add another click handler to it
addTrackedListener(div, 'onclick', function() {
  console.log('second handler');
});

当点击事件触发时，您会在控制台中看到此信息：

first handler
second handler

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

Answer 2

这是一个有点奇怪的问题，考虑到它也被标记为“jQuery”。

在jQuery中，事件处理程序非常简单。您的第一个示例可以重写如下：

function clickFn(){};

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

那，或者我已经误解了这个问题。

JavaScript：跟踪DOM元素上的事件监听器

2 个答案: