Count MooTools Events Per Element in MooTools 1.2

By  on  

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?

Recent Features

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

  • By
    Responsive Images: The Ultimate Guide

    Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today's websites and devices become ever more varied, a plethora of responsive images...

Incredible Demos

  • By
    9 Mind-Blowing WebGL Demos

    As much as developers now loathe Flash, we're still playing a bit of catch up to natively duplicate the animation capabilities that Adobe's old technology provided us.  Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos.  Another technology available...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Discussion

  1. Yeah I would. someone should write a Firebug extension that does this…

  2. :S Why not use element.addEvents? would save a lot of typing.

  3. Could have Fabio, but that isn’t necessarily the point of the article. :)

  4. 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

  5. Rolf

    When would you use this? Any real world example?

  6. @Fabio: if David used addEvents in 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'); }
    
    });

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!