Removing inline Javascript and using Mootools addEvent()

Javascript lets us run program logic on the client-side, meaning we can change HTML Elements dynamically based on some logic without reloading the page with a new server call. This logic is run by Events that are launched from User Interaction. A common way of doing so is adding inline Javascript events, but I’d like to erradicate this scourge from the web.

<a href=”javascript:doStuff()”>Do Stuff</a>

<form onsubmit=”doStuff()”>

Both examples are common ways of including client-site scripting to take place when users interact with links or buttons. And both ways have a better alternative.

First, here’s the issues I have with this way of implementing Javascript, that way you’ll know why I bother to do it differently.

1. Maintenance: If you change the name of the function, or the parameters, you would need to update every single call to the function. Which sucks if you have a lot of buttons.
2. Modularity: Just like with CSS being separate, it makes sense to have as much Javascript as possible contained in itself. No need mixing boundaries by blending HTML and Javascript.
3. Accessibility: By requiring Javascript to be part of the action, such as the href of an anchor button, you’ve made it impossible to work with Javascript. Leaving it with its HTML version will let it work if Javascript is disabled.
4. Privacy: This might be personal preference. But I dislike broadcasting my Javascript functions to the user. The inline way will show what Javascript call is being made in the status bar. Sure, if someone digs hard enough they’ll find out, but at least I’m not buck-naked.

Adding Events with Mootools

First of all, it’s very easy to add Event Listeners to DOM objects with Mootools. You just access the DOM Element, and use the addEvent() function. Here’s how:

The Cure

$('button').addEvent('click',function(event){
	event.stop();
	alert("Doing stuff");
});

<a href="dostuff.html" id="button">Do Stuff</a>

This gets the DOM Element of ID button. The function addEvent() takes 2 parameters, the first being the type of Event, click in this case, and the second being a function to execute when that Event is heard.

Using event.stop() we’ve prevented the normal action, which would have been to load dostuff.html (good to have for accessibilty so in case Javascript isn’t around to stop the event, it goes to dostuff.html).

.bind() and .each()

Here’s two extra functions that are very useful to know when adding Event Listeners to Elements.

Array.each()

Firstly, .each() helps make adding this function page wide extremely simple. Let’s take a look.

<a href="dostuff.html" class=”butto>Do Stuff</a>

$$(’.button’).each(function(stuffButton) {
	stuffButton.addEvent(’click’,function(event){
		event.stop();
		alert(”Doing stuff”);
	});
});

Here, using $$('.className') we’ve grab an array of DOM Elements, all with the class of button. Then, using Mootools’ Array.each() function, we iterate over every object in the Array, and access it using the parameter we pass, in this case stuffButton.

Function.bind()

Also useful, is if you use the addEvent() function in a class and want call a different class function, you’ll find this.classFunction() to betray you. This is because addEvent() is a function of Element, so using this inside that function will think it refers to the instance of that Element, instead of the class you had hoped.

To leverage the this keyword back into your control, you’ll use the bind() function.

$$('.button').each(function(stuffButton) {
	stuffButton.addEvent('click',function(event){
		event.stop();
		this.doStuff();
	}.bind(this));
});

You can use any object as the parameter of bind(), making that object accessible with this.

Events to Mootoolize

Here’s a small list of common inline Javascript Events that you can listen for with addEvent. Simple remove the ‘on’ and keep the rest of the word.

• onClick
• onSubmit
• onMouseOver - Useful rarely. Usually, CSS psuedo-class :hover is the proper use.
• onKeyPress - I think. If it’s not a useable inline, at least keypress is an Event you can listen for.