的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元素保持跟蹤事件偵聽器的

回答

相關問題