jquery - JavaScript: Keeping track of eventListeners on DOM elements -

what best way keep track of eventlistener functions on dom elements? should add property element references function this:

var elem = document.getelementsbytagname( 'p' )[0]; function clickfn(){}; elem.listeners = { click: [clickfn, function(){}] }; elem.addeventlistener( 'click', function(e){ clickfn(e); }, false ); 

or should store in own variable in code below:

var elem = document.getelementsbytagname( 'p' )[0]; function clickfn(){}; // using window sake of brevity, otherwise wouldn't =d // dom elements , listeners referenced here in paired array window.listeners = [elem, { click: [clickfn, function(){}] }]; elem.addeventlistener( 'click', function(e){ clickfn(e); }, false ); 

obviously second method less obtrusive, seems intensive iterating through possibilities.

which best way , why? there better way?

as other answers have mentioned, since tagged question jquery, doesn't make sense you're trying add , track events plain javascript this. in addition, way seem doing doesn't track anything, because you're manually adding function reference listeners properties, independent of assigning them event handlers on elements. when there's no way ensure ones you're "tracking" what's going called when event fires.

if you're insistent on avoiding jquery, here's example of how add multiple handlers multiple events , keep track of functions have been assigned handle events later:

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) {   (var = 0, l = events.length; < l; i++) {     events[i]();   } } 

example usage:

// grab element var div = document.getelementbyid('test');  // add click handler addtrackedlistener(div, 'onclick', function() {   console.log('first handler'); });  // add click handler addtrackedlistener(div, 'onclick', function() {   console.log('second handler'); }); 

when click event fires, you'd see in console:

first handler second handler 

and if inspect div.trackedevents, you'll see property each type of event, value array of functions execute when event triggered.