MooTools Plugin: Event.Mock

By  on  

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!

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 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    MooTools onLoad SmoothScrolling

    SmoothScroll is a fantastic MooTools plugin but smooth scrolling only occurs when the anchor is on the same page. Making SmoothScroll work across pages is as easy as a few extra line of MooTools and a querystring variable. The MooTools / PHP Of course, this is a...

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

Discussion

  1. Very nice!
    I would definitely use it for testing, but not in production code. I think that firing events manually isn’t a best practice. I’d rather dividing into two functions – a listener and a performer, where the listener calls the performer (with or without event data). Then, I can call the performer from wherever I need in the code.

  2. Andy

    I see that you have to duplicate the selector the way you have this designed. Could this be simplified into an Element class function? like Element.mockEvent? Or would there be specific cases where you would want the target to not be the Element with the listener?

  3. Hi David,

    I was always facing the problem when I have placed e.stop(); in any event assigning function and by calling the event using fireEvent.

    But now there you are. You have solved that problem for me…

    Thanks a lot
    Avi

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