Element. Event.js

Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.

License

MIT-style license.

Summary
Element. Event.jsContains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
EventCross browser methods to manage events.
Properties
stopcross browser method to stop an event
stopPropagationcross browser method to stop the propagation of an event
preventDefaultcross browser method to prevent the default action of the event
keys
ElementCustom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties
addEventAttaches an event listener to a DOM element.
removeEventWorks as Element.addEvent, but instead removes the previously added event listener.
addEventsAs addEvent, but accepts an object and add multiple events at once.
removeEventsremoves all events of a certain type from an element.
fireEventexecutes all events of the specified type present in the element.
cloneEventsClones all events from an element to this element.
Custom Events
Events
mouseenterIn addition to the standard javascript events (load, mouseover, mouseout, click, etc.)
mouseleavethis event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)
FunctionA collection of The Function Object prototype methods.
Properties
bindWithEventautomatically passes MooTools Event Class.

Event

Cross browser methods to manage events.

Arguments

eventthe event

Properties

shifttrue if the user pressed the shift
controltrue if the user pressed the control
alttrue if the user pressed the alt
metatrue if the user pressed the meta key
wheelthe amount of third button scrolling
codethe keycode of the key pressed
page.xthe x position of the mouse, relative to the full window
page.ythe y position of the mouse, relative to the full window
client.xthe x position of the mouse, relative to the viewport
client.ythe y position of the mouse, relative to the viewport
keythe key pressed as a lowercase string. key also returns ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’.  Handy for these special keys.
targetthe event target
relatedTargetthe event related target

Example

$('myLink').onkeydown = function(event){
    var event = new Event(event);
    //event is now the Event class.
    alert(event.key); //returns the lowercase letter pressed
    alert(event.shift); //returns true if the key pressed is shift
    if (event.key == 's' && event.control) alert('document saved');
};
Summary
Properties
stopcross browser method to stop an event
stopPropagationcross browser method to stop the propagation of an event
preventDefaultcross browser method to prevent the default action of the event
keys

Properties

stop

cross browser method to stop an event

stopPropagation

cross browser method to stop the propagation of an event

preventDefault

cross browser method to prevent the default action of the event

keys

you can add additional Event keys codes this way

Example

Event.keys.whatever = 80;
$(myelement).addEvent(keydown, function(event){
    event = new Event(event);
    if (event.key == 'whatever') console.log(whatever key clicked).
});

Element

Custom class to allow all of its methods to be used with any DOM element via the dollar function $.

Summary
Properties
addEventAttaches an event listener to a DOM element.
removeEventWorks as Element.addEvent, but instead removes the previously added event listener.
addEventsAs addEvent, but accepts an object and add multiple events at once.
removeEventsremoves all events of a certain type from an element.
fireEventexecutes all events of the specified type present in the element.
cloneEventsClones all events from an element to this element.

Properties

addEvent

Attaches an event listener to a DOM element.

Arguments

typethe event to monitor (‘click’, ‘load’, etc) without the prefix ‘on’.
fnthe function to execute

Example

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

removeEvent

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

addEvents

As addEvent, but accepts an object and add multiple events at once.

removeEvents

removes all events of a certain type from an element. if no argument is passed in, removes all events.

Arguments

typestring; the event name (e.g.  ‘click’)

fireEvent

executes all events of the specified type present in the element.

Arguments

typestring; the event name (e.g.  ‘click’)
argsarray or single object; arguments to pass to the function; if more than one argument, must be an array
delay(integer) delay (in ms) to wait to execute the event

cloneEvents

Clones all events from an element to this element.

Arguments

fromelement, copy all events from this element
typeoptional, copies only events of this type

Custom Events

Summary
Events
mouseenterIn addition to the standard javascript events (load, mouseover, mouseout, click, etc.)
mouseleavethis event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)

Events

mouseenter

In addition to the standard javascript events (load, mouseover, mouseout, click, etc.)  <Event.js> contains two custom events this event fires when the mouse enters the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseover)

Example

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

mouseleave

this event fires when the mouse exits the area of the dom element; will not be fired again if the mouse crosses over children of the element (unlike mouseout)

Example

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

Function

A collection of The Function Object prototype methods.

Summary
Properties
bindWithEventautomatically passes MooTools Event Class.

Properties

bindWithEvent

automatically passes MooTools Event Class.

Arguments

bindoptional, the object that the “this” of the function will refer to.
argsoptional, an argument to pass to the function; if more than one argument, it must be an array of arguments.

Returns

a function with the parameter bind as its “this” and as a pre-passed argument event or window.event, depending on the browser.

Example

function myFunction(event){
   alert(event.client.x) //returns the coordinates of the mouse..
};
myElement.addEvent('click', myFunction.bindWithEvent(myElement));
returns the element passed in with all the Element prototypes applied.
Attaches an event listener to a DOM element.

Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi