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
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

  • By
    Scrolling “Agree to Terms” Component with MooTools ScrollSpy

    Remember the good old days of Windows applications forcing you to scroll down to the bottom of the "terms and conditions" pane, theoretically in an effort ensure that you actually read them? You're saying "No David, don't do it." Too late -- I've done...

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!