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
    Creating Scrolling Parallax Effects with CSS

    Introduction For quite a long time now websites with the so called "parallax" effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

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!