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
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    jQuery Link Nudging

    A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here's how to do it using jQuery: The jQuery JavaScript It's important to keep...

  • By
    Use Custom Missing Image Graphics Using MooTools

    Missing images on your website can make you or your business look completely amateur. Unfortunately sometimes an image gets deleted or corrupted without your knowledge. You'd agree with me that IE's default "red x" icon looks awful, so why not use your own missing image graphic? The MooTools JavaScript Note that...

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!