MooTools Tip: Adding Events During Element Creation
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?
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.
It’s not a real mistake to add the events in that way.
@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
I was not aware of that. Thanks :D
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.like ‘events’, you can also set effects with ‘tween’,’morph’,’slide’. You can actually set any of the value of the Element.properties Hash
@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!
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..
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'));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!