CSSgallery.info

We will try to make a little set of tutorials how to use mootools framework for almost absolute beginners. You will need to know basic javascript. The documentation for mootools framework is a little hard to understand and requires more advanced javascript knowledges.

But…… every webdesigner (and of course beginners first) wants a hassle free solution that works with less effort. So let’s start

How to add events to elements in a webpage using motools ?

First of all a small explanation on events. What are events?.

Events appears when something is happening in the page we visit, like a mouse click, a key pressed or anything else might be an interaction from user with that page, or some “special” events like “domready”, “load”, or “unload”.

First category are simple to understand - the user makes something on page.(click, mousemove,press a key)

To be able to manipulate the elements of a page we need them first loaded. Here comes second category, where we will use more “domready” and “load”. The difference between those two is how they occur: domready is triggered when all the document structure is loaded, and load when all the content is loaded.

If we consider as example a page with 4 huge images - let’ say 2.5M each - the time difference between those two events can be for example 10 sec, because the structure (DOM) of the document is loaded almost instantly, but the content of the images is loaded in time depending on our internet connection speed. So we can use domready to start executing our script, without needing to wait for all the content to come.

The addEvent method in mootools has the next declaration:

element.addEvent( event, function to execute);

element - one element of the page obtained using a selector like $(’my_element’) which is the equivalent of document.getElementById(’my_element’), or a previous created element.

Also ‘document‘ can be used, and will be for domready or load events.

event - one of the events, that suit to the type of element we have - click, change, domready, etc

function to execute - a function to execute, declared previously or here

Here is a catch.

If u predeclare the function, u will need to use addEvent like this:

function my_function() { alert(’test’) };

$(’my_element’).addEvent(’click‘, my_function);

If u want to declare the function inside of addEvent, you must specify is a function, like this:

$(’my_element’).addEvent( ‘click‘ , function { alert(’test’) } );

Now, in a page, to do this, you have two ways:

First is to add the script that attach the click event to $(’my_element’) at the end of the page, so the element exists, or to use the domready event, to attach the event while the content of images in page is loading.

Something like this:

document.addEvent( ‘domready‘ , function() {

$(’my_element’).addEvent( ‘click‘ , function() { alert(’test’) } );

} );

Please take a look at the example, and example source for a clear working example.

I am waiting for your comments, improvement, or corrections :).