Count MooTools Events Per Element in MooTools 1.2
Every once in a while I'll need to check an element to see how many (usually 1 or 0) events of a specific type are tied to a specific element. Here's how you can check how many events and of which type have been assigned to an element.
The MooTools JavaScript
/* when the dom's ready */
window.addEvent('domready',function() {
/* our element */
var element = $('element-with-events');
/* create custom event */
Element.Events.customevent = {
base: 'click',
condition: function(event) {
return 'garbage';
}
};
/* add a bunch of different events */
element.addEvent('click',function() { console.log('click event 1'); });
element.addEvent('click',function() { console.log('click event 2'); });
element.addEvent('resize',function() { console.log('resize event 1'); });
element.addEvent('mouseenter',function() { console.log('mouseenter event 1'); });
element.addEvent('mouseleave',function() { console.log('mouseleave event 2'); });
element.addEvent('mouseleave',function() { console.log('mouseleave event 3'); });
element.addEvent('mouseleave',function() { console.log('mouseleave event 4'); });
element.addEvent('customevent',function() { console.log('customevent event 1'); });
/* save a hash of the events */
var events = new Hash(element.retrieve('events'));
/* get the number of event types */
console.log('# Of Different Events: ' + events.getLength()); // returns 5
/* save the keys */
var keys = events.getKeys();
/* get the event types and how many per */
console.log('Different Event Types: ' + keys.join(', ')); //returns 'click', 'resize', 'mouseenter', 'mouseleave', 'customevent'
/* save the types, get the number of events per event type */
keys.each(function(key) {
console.log(new Hash(events[key]));
console.log('# of ' + key + ' events: ' + new Hash(events[key]).keys.length);//returns 'click': 2, 'resize': 1, 'mouseenter': 1, 'mouseleave': 4, 'customevent': 1
});
});
The source code above is pretty self explanatory (comments FTW!). Would you use this for anything?
Yeah I would. someone should write a Firebug extension that does this…
:S Why not use
element.addEvents? would save a lot of typing.Could have Fabio, but that isn’t necessarily the point of the article. :)
Interesting. I don’t know how I would use that… It rarely gets so out of hand that I don’t know how many events my elements have
When would you use this? Any real world example?
@Fabio: if David used
addEventsin this case he would lose some of his events because of the duplication of the keys.element.addEvents({ 'click' : function() { console.log('click event 1'); }, 'click' : function() { console.log('click event 2'); }, // blows away (click event 1) 'resize' : function() { console.log('resize event 1'); }, 'mouseenter' : function() { console.log('mouseenter event 1'); }, 'mouseleave' : function() { console.log('mouseleave event 1'); }, 'mouseleave' : function() { console.log('mouseleave event 2'); }, // blows away (mouseleave event 1) 'mouseleave' : function() { console.log('mouseleave event 3'); }, // blows away (mouseleave event 2) 'customevent' : function() { console.log('customevent event 1'); } });