MooTools Tip: Adding Events During Element Creation

By  on  

One mistake I've made in the past with my MooTools elements is adding events to them after I've created and injected them into the page. An example of this would be:

var a = new Element('a',{
	href: 'https://davidwalsh.name',
	rel: 'lightbox',
	text: 'David Walsh Blog',
	title: 'David Walsh Blog: Best on the Web!',
	'class': 'shoutout',
	styles: {
		color: '#0f0',
		display: 'block'
	}
});
a.inject($('description'));

a.addEvents({
	click: function(e) {
		e.stop();
		console.log('Clicked!');
	},
	mouseenter: function(e) {
		e.stop();
		console.log('You are on top of me!');
	}
});

What you may not know is that you can add these events during the element creation process. Here's how.

The MooTools JavaScript

var a = new Element('a',{
	href: 'https://davidwalsh.name',
	rel: 'lightbox',
	text: 'David Walsh Blog',
	title: 'David Walsh Blog: Best on the Web!',
	'class': 'shoutout',
	styles: {
		color: '#0f0',
		display: 'block'
	},
	events: {
		click: function(e) {
			e.stop();
			console.log('Clicked!');
		},
		mouseenter: function() {
			console.log('You are on top of me!');
		}
	}
});
a.inject($('description'));

Cool, huh?

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

Incredible Demos

  • By
    CSS content and attr

    CSS is becoming more and more powerful but in the sense that it allows us to do the little things easily.  There have been larger features added like transitions, animations, and transforms, but one feature that goes under the radar is generated content.  You saw a...

  • By
    MooTools Equal Heights Plugin:  Equalizer

    Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can't be done with CSS -- you need a little help from your JavaScript friends. Well...now you're...

Discussion

  1. I’ll also add that I look at a lot of other users’ MooTools code and see the same adding of events after creation instead of during.

  2. It’s not a real mistake to add the events in that way.

  3. @marcus: Currently I really appreciate David job. His blog has a lot of reader and a lot doesn’t really know mootools in depth. Plus, as he said, usually you don’t remember each of the refinements of the framework. Any article pointing the engine strengths is welcome ;D

  4. jacob

    I was not aware of that. Thanks :D

  5. I’m sure you know but figured I’d mention it for any of the newer guys reading this… you can chain the .inject($('description')) onto the end of the element creation.

  6. olivier

    like ‘events’, you can also set effects with ‘tween’,’morph’,’slide’. You can actually set any of the value of the Element.properties Hash

  7. @Ryan: Yep — wanted to keep the example as simple and “readable/understandable” as possible for a noob.

    @Olivier: I considered adding those too but again, I wanted to keep this very simple. Thank you for mentioning that though!

  8. Jan

    In the beginning I always red your blog but now almost all your post are about MooTools. Why don’t you write about jQuery? There are a lot more jQuery users..

  9. You can also avoid having to create a variable, to hold the instance of the new Element so that it can be injected, by directly injecting it right away.

    new Element('a',{ 
         href: 'http://davidwalsh.name', 
         rel: 'lightbox', 
         text: 'David Walsh Blog', 
         title: 'David Walsh Blog: Best on the Web!', 
         'class': 'shoutout', 
         styles: { 
             color: '#0f0', 
             display: 'block' 
         }, 
         events: { 
             click: function(e) { 
                 e.stop(); 
                 console.log('Clicked!'); 
             }, 
             mouseenter: function() { 
                 console.log('You are on top of me!'); 
             } 
         } 
     }).inject($('description'));
    
  10. Jem

    I definitely dont create my events in the constructors as often as I could either, its nice to be reminded that this option exists from time to time!

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