的JavaScript：在DOM元素保持跟踪事件侦听器的

什么是跟踪eventListenerfunction S于DOM元素的最佳方式？我应该将属性添加到它引用function这样的元素：的JavaScript：在DOM元素保持跟踪事件侦听器的

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

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

这是最好的办法，为什么？有没有更好的办法？

来源

2010-04-27 ground5hark

这是一个稍微奇怪的问题，考虑到它也已被标签为“jQuery的”。

在jQuery中，事件处理程序是由非常简单。你的第一个例子可以改写为以下几点：

function clickFn(){}; 

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

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

来源

2010-04-27 06:32:23 GlenCrawford

至于其他的答案也提到，因为你标记与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](); 
    } 
}

用法示例：

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

当click事件触发，你会看到在您的控制台：

first handler 
second handler

如果你检查div.trackedEvents，你会看到每个类型的事件，其价值将是在触发该事件将执行所有功能数组的属性。

来源

2010-04-27 07:44:21

的JavaScript：在DOM元素保持跟踪事件侦听器的

回答

相关问题