1 Type: DOMEvent {#Event}
4 MooTools DOMEvent Methods.
6 DOMEvent Method: constructor {#DOMEvent:constructor}
7 ----------------------------------------------------
11 new DOMEvent([event[, win]]);
15 1. event - (*event*, required) An HTMLEvent Object.
16 2. win - (*window*, optional: defaults to window) The context of the event.
20 * page.x - (*number*) The x position of the mouse, relative to the full window.
21 * page.y - (*number*) The y position of the mouse, relative to the full window.
22 * client.x - (*number*) The x position of the mouse, relative to the viewport.
23 * client.y - (*number*) The y position of the mouse, relative to the viewport.
24 * rightClick - (*boolean*) True if the user clicked the right mousebutton
25 * wheel - (*number*) The amount of third button scrolling.
26 * relatedTarget - (*element*) The event related target.
27 * target - (*element*) The event target.
28 * code - (*number*) The keycode of the key pressed.
29 * key - (*string*) The key pressed as a lowercase string. key can be 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'tab', 'delete', and 'esc'.
30 * shift - (*boolean*) True if the user pressed the shift key.
31 * control - (*boolean*) True if the user pressed the control key.
32 * alt - (*boolean*) True if the user pressed the alt key.
33 * meta - (*boolean*) True if the user pressed the meta key.
37 $('myLink').addEvent('keydown', function(event){
38 // the passed event parameter is already an instance of the Event type.
39 alert(event.key); // returns the lowercase letter pressed.
40 alert(event.shift); // returns true if the key pressed is shift.
41 if (event.key == 's' && event.control) alert('Document saved.'); //executes if the user presses Ctr+S.
46 - Accessing event.page / event.client requires the page to be in [Standards Mode](http://hsivonen.iki.fi/doctype/).
47 - Every event added with addEvent gets the MooTools method automatically, without the need to manually instance it.
48 - `event.key` is only reliable with `keydown` or `keyup` events. See [PPK](http://www.quirksmode.org/js/keys.html).
50 DOMEvent Method: stop {#DOMEvent:stop}
51 --------------------------------------
53 Stop an event from propagating and also executes preventDefault.
61 * (*object*) This DOMEvent instance.
67 <a id="myAnchor" href="http://google.com/">Visit Google.com</a>
71 $('myAnchor').addEvent('click', function(event){
72 event.stop(); //Prevents the browser from following the link.
73 this.set('text', 'Where do you think you\'re going?'); //'this' is Element that fires the Event.
75 this.set('text', 'Instead visit the Blog.').set('href', 'http://blog.mootools.net');
81 - Returning false within the function can also stop the propagation of the Event.
85 - [Element.addEvent](#Element:addEvent), [DOMEvent.stopPropagation](#DOMEvent:stopPropagation), [DOMEvent.preventDefault](#DOMEvent:preventDefault), [Function:delay][]
88 DOMEvent Method: stopPropagation {#DOMEvent:stopPropagation}
89 ------------------------------------------------------------
91 Cross browser method to stop the propagation of an event (this stops the event from bubbling up through the DOM).
95 myEvent.stopPropagation();
99 * (*object*) This DOMEvent object.
103 "#myChild" does not cover the same area as myElement. Therefore, the 'click' differs from parent and child depending on the click location:
108 <div id="myChild"></div>
113 $('myElement').addEvent('click', function(){
115 return false; //equivalent to stopPropagation.
117 $('myChild').addEvent('click', function(event){
118 event.stopPropagation(); //prevents the event from bubbling up, and fires the parent's click event.
123 - [Element:addEvent][]
124 - [MDN event.stopPropagation][]
127 DOMEvent Method: preventDefault {#DOMEvent:preventDefault}
128 --------------------------------------------
130 Cross browser method to prevent the default action of the event.
134 myEvent.preventDefault();
138 * (*object*) This DOMEvent object.
145 <input id="myCheckbox" type="checkbox" />
150 $('myCheckbox').addEvent('click', function(event){
151 event.preventDefault(); //prevents the checkbox from being "checked".
156 - [Element:addEvent][]
157 - [MDN event.preventDefault][]
160 Function: DOMEvent.defineKey {#DOMEvent:DOMEvent-defineKey}
161 -----------------------------------------------------------
163 This function allows to add an additional event key code.
167 DOMEvent.defineKey(16, 'shift');
168 $('myInput').addEvent('keydown', function(event){
169 if (event.key == 'shift') alert('You pressed shift.');
172 #### Predefined keys:
187 - [MooTools More Keyboard][]
190 Function: DOMEvent.defineKeys {#DOMEvent:DOMEvent-defineKey}
191 -----------------------------------------------------------
193 This function allows to add additional event key codes.
197 DOMEvent.defineKeys({
201 $('myInput').addEvent('keydown', function(event){
202 if (event.key == 'control') alert('You pressed control.');
206 [Element:addEvent]: /core/Element/Element.Event#Element:addEvent
207 [Function]: /core/Types/Function
208 [Function:bind]: /core/Types/Function/#Function:bind
209 [Function:pass]: /core/Types/Function/#Function:pass
210 [Function:delay]: /core/Types/Function/#Function:delay
211 [MooTools More Keyboard]: /more/Interface/Keyboard
213 [MDN event.stopPropagation]: https://developer.mozilla.org/en/DOM/event.stopPropagation
214 [MDN event.preventDefault]: https://developer.mozilla.org/en/DOM/event.preventDefault