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
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Image Manipulation with PHP and the GD Library

    Yeah, I'm a Photoshop wizard. I rock the selection tool. I crop like a farmer. I dominate the bucket tool. Hell, I even went as far as wielding the wizard wand selection tool once. ...OK I'm rubbish when it comes to Photoshop.

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

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!