the compact javascript framework
in partnership with mediatemple
Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent.
MIT-style license.
Element. Event.js | Contains the Event Class, Element methods to deal with Element events, custom Events, and the Function prototype bindWithEvent. |
Event | Cross browser methods to manage events. |
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 | |
Element | Custom class to allow all of its methods to be used with any DOM element via the dollar function $. |
Properties | |
addEvent | Attaches an event listener to a DOM element. |
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. |
fireEvent | executes all events of the specified type present in the element. |
cloneEvents | Clones all events from an element to this element. |
Custom Events | |
Events | |
mouseenter | In addition to the standard javascript events (load, mouseover, mouseout, click, etc.) |
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) |
Function | A collection of The Function Object prototype methods. |
Properties | |
bindWithEvent | automatically passes MooTools Event Class. |
Cross browser methods to manage events.
event | the event |
shift | true if the user pressed the shift |
control | true if the user pressed the control |
alt | true if the user pressed the alt |
meta | true if the user pressed the meta key |
wheel | the amount of third button scrolling |
code | the keycode of the key pressed |
page.x | the x position of the mouse, relative to the full window |
page.y | the y position of the mouse, relative to the full window |
client.x | the x position of the mouse, relative to the viewport |
client.y | the y position of the mouse, relative to the viewport |
key | the key pressed as a lowercase string. key also returns ‘enter’, ‘up’, ‘down’, ‘left’, ‘right’, ‘space’, ‘backspace’, ‘delete’, ‘esc’. Handy for these special keys. |
target | the event target |
relatedTarget | the event related target |
$('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'); };
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 |
Event.keys.whatever = 80; $(myelement).addEvent(keydown, function(event){ event = new Event(event); if (event.key == 'whatever') console.log(whatever key clicked). });
Custom class to allow all of its methods to be used with any DOM element via the dollar function $.
Properties | |
addEvent | Attaches an event listener to a DOM element. |
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. |
fireEvent | executes all events of the specified type present in the element. |
cloneEvents | Clones all events from an element to this element. |
Attaches an event listener to a DOM element.
type | the event to monitor (‘click’, ‘load’, etc) without the prefix ‘on’. |
fn | the function to execute |
$('myElement').addEvent('click', function(){alert('clicked!')});
As addEvent, but accepts an object and add multiple events at once.
removes all events of a certain type from an element. if no argument is passed in, removes all events.
type | string; the event name (e.g. ‘click’) |
executes all events of the specified type present in the element.
type | string; the event name (e.g. ‘click’) |
args | array 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 |
Clones all events from an element to this element.
from | element, copy all events from this element |
type | optional, copies only events of this type |
Events | |
mouseenter | In addition to the standard javascript events (load, mouseover, mouseout, click, etc.) |
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) |
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)
$(myElement).addEvent('mouseenter', myFunction);
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)
$(myElement).addEvent('mouseleave', myFunction);
A collection of The Function Object prototype methods.
Properties | |
bindWithEvent | automatically passes MooTools Event Class. |
automatically passes MooTools Event Class.
bind | optional, the object that the “this” of the function will refer to. |
args | optional, an argument to pass to the function; if more than one argument, it must be an array of arguments. |
a function with the parameter bind as its “this” and as a pre-passed argument event or window.event, depending on the browser.
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.
Documentation by Aaron Newton & Mootools Developers, generated by NaturalDocs and GeSHi