MooTools Plugin: Event.Mock

Those of you who visit this blog often know that I have a certain love for the simple things: simple CSS enhancements, simple PHP scripts, and most importantly, simple JavaScript plugins. One plugin that recently caught my attention was Arieh Glazer Event.Mock plugin. Event.Mock is a tiny MooTools plugin (essentially just a small function; not a MooTools class) that does exactly what it says: provides a Mock event for easy use with Element.fireEvent.

Why Event.Mock?

One frequent MooTools occurrence is assigning an event to a given element, then firing an event on the given element. The problem that occurs is that fireEvent doesn't provide an Event object to the event listener's function because a real event didn't occur. Thus, if you reference the event within the listener function, you'll get an error:

/* assign an event to myElement */
$('myElement').addEvent('click',function(e) {
	var target = e.target;  /* ERROR! -- e is null */
})

/* fire an event */
$('myElement').fireEvent('click');

Event.Mock serves as a fake event to provide to the listener function.

The Event.Mock MooTools JavaScript

/**
 * creates a Mock event to be used with fire event
 * @param Element target an element to set as the target of the event - not required
 *  @param string type the type of the event to be fired. Will not be used by IE - not required.
 *
 */
Event.Mock = function(target,type){
var e = window.event;
type = type || 'click';

if (document.createEvent){
    e = document.createEvent('HTMLEvents');
    e.initEvent(
        type, //event type
        false, //bubbles - set to false because the event should like normal fireEvent
        true //cancelable
    );
}
e = new Event(e);
e.target = target;
return e;
}

Event.Mock accepts two arguments: the first being the fake event's target element, the second being the type of event (i.e. "click", "mouseenter", etc.) That means I can use Event.Mock as such:

/* listen! */
$('myElement').addEvent('click',function(e){
	/* log the event to the console */
	console.log(e);
});

/* fire! */
$('myElement').fireEvent('click',new Event.Mock($('myElement'),'mousedown'));

Boom. No worries about event errors AND useful information, in the form of a fake event target and type, is event listener function.

Big ups to Arieh for his simple but useful MooTools plugin!