• Custom Type to allow all of its methods to be used with any DOM element via the dollar function $.
• These methods are also available on window and document.

• Internet Explorer fires element events in random order if they are not fired by Element:fireEvent.

Attaches an event listener to a DOM element.

myElement.addEvent(type, fn);

1. type - (string) The event name to monitor ('click', 'load', etc) without the prefix 'on'.
2. fn - (function) The function to execute.

• (element) This Element.

<div id="myElement">Click me.</div>

$('myElement').addEvent('click', function(){
    alert('clicked!');
});

• You can stop the Event by returning false in the listener or calling Event:stop.
• This method is also attached to Document and Window.

• w3schools Event Attributes

Works as Element.addEvent, but instead removes the specified event listener.

myElement.removeEvent(type, fn);

1. type - (string) The event name.
2. fn - (function) The function to remove.

• (element) This Element.

var destroy = function(){ alert('Boom: ' + this.id); } // this refers to the Element.
$('myElement').addEvent('click', destroy);

//later...
$('myElement').removeEvent('click', destroy);

var destroy = function(){ alert('Boom: ' + this.id); }
var boundDestroy = destroy.bind($('anotherElement'));
$('myElement').addEvent('click', boundDestroy);

//later...
$('myElement').removeEvent('click', destroy); // this won't remove the event.
$('myElement').removeEvent('click', destroy.bind($('anotherElement')); // this won't remove the event either.
$('myElement').removeEvent('click', boundDestroy); // the correct way to remove the event.

• When the function is added using Function:bind or Function:pass, etc, a new reference is created. For removeEvent to work, you must pass a reference to the exact function to be removed.
• This method is also attached to Document and Window.

The same as Element:addEvent, but accepts an object to add multiple events at once.

myElement.addEvents(events);

1. events - (object) An object with key/value representing: key the event name, and value the function that is called when the Event occurs.

• (element) This Element.

$('myElement').addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

• This method is also attached to Document and Window.

• Element:addEvent

Removes all events of a certain type from an Element. If no argument is passed, removes all events of all types.

myElements.removeEvents([events]);

1. events - (optional) if not passed removes all events from the element.
   • (string) The event name (e.g. 'click'). Removes all events of that type.
   • (object) An object of type function pairs. Like the one passed to Element:addEvent.

• (element) This Element.

var myElement = $('myElement');
myElement.addEvents({
    mouseover: function(){
        alert('mouseover');
    },
    click: function(){
        alert('click');
    }
});

myElement.addEvent('click', function(){ alert('clicked again'); });
myElement.addEvent('click', function(){ alert('clicked and again :('); });
//addEvent will keep appending each function.
//Unfortunately for the visitor, there will be three alerts they'll have to click on.
myElement.removeEvents('click'); // saves the visitor's finger by removing every click event.

• This method is also attached to Document and Window.

• Element:removeEvent

Executes all events of the specified type present in the Element.

myElement.fireEvent(type[, args[, delay]]);

1. type - (string) The event name (e.g. 'click')
2. args - (mixed, optional) Array or single object, arguments to pass to the function. If more than one argument, must be an array.
3. delay - (number, optional) Delay (in ms) to wait to execute the event.

• (element) This Element.

// fires all the added 'click' events and passes the Element 'anElement' after one second
$('myElement').fireEvent('click', $('anElement'), 1000);

• This will not fire the DOM Event (this concerns all inline events ie. onmousedown="..").
• This method is also attached to Document and Window.

Clones all events from an Element to this Element.

myElement.cloneEvents(from[, type]);

1. from - (element) Copy all events from this Element.
2. type - (string, optional) Copies only events of this type. If null, copies all events.

• (element) This Element.

var myElement = $('myElement');
var myClone = myElement.clone().cloneEvents(myElement); // clones the element and its events

• This method is also attached to Document and Window.

You can add additional custom events by adding properties (objects) to the Element.Events Object

The Element.Events.yourProperty (object) can have:

1. base - (string, optional) the base event the custom event will listen to. Its not optional if condition is set.
2. condition - (function, optional) the condition from which we determine if the custom event can be fired. Is bound to the element you add the event to. The Event is passed in.
3. onAdd - (function, optional) the function that will get fired when the custom event is added. Is bound to the element you add the event to.
4. onRemove - (function, optional) the function that will get fired when the custom event is removed. Is bound to the element you add the event to.

Element.Events.shiftclick = {
    base: 'click', // the base event type
    condition: function(event){ //a function to perform additional checks
        return (event.shift == true); // this means the event is free to fire
    }
};

$('myInput').addEvent('shiftclick', function(event){
    log('the user clicked the left mouse button while holding the shift key');
});

• There are different types of custom Events you can create:
  1. Custom Events with only base: they will just be a redirect to the base event.
  2. Custom Events with base and condition: they will be redirect to the base event, but only fired if the condition is met.
  3. Custom Events with onAdd and/or onRemove and any other of the above: they will also perform additional functions when the event is added/removed.
• Since MooTools 1.3 this is a native JavaScript Object and not an instance of the deprecated Hash

If you use the condition option you NEED to specify a base type, unless you plan to overwrite a native event. (highly unrecommended: use only when you know exactly what you're doing).

This event fires when the mouse enters the area of the DOM Element and will not be fired again if the mouse crosses over children of the Element (unlike mouseover).

$('myElement').addEvent('mouseenter', myFunction);

• Element:addEvent

This event fires when the mouse leaves the area of the DOM Element and will not be fired if the mouse crosses over children of the Element (unlike mouseout).

$('myElement').addEvent('mouseleave', myFunction);

• Element:addEvent

This event fires when the mouse wheel is rotated;

$('myElement').addEvent('mousewheel', myFunction);

• This custom event just redirects DOMMouseScroll (Mozilla) to mousewheel (Opera, Internet Explorer), making it work across browsers.

• Element:addEvent