Native: Event

MooTools Event Methods.

Event Method: constructor

Синтаксис:

new Event([event[, win]]);

Аргументы:

1. event - (event) An HTMLEvent Object.
2. win - (window, optional: defaults to window) The context of the event.

Properties:

• shift - (boolean) True if the user pressed the shift key.
• control - (boolean) True if the user pressed the control key.
• alt - (boolean) True if the user pressed the alt key.
• meta - (boolean) True if the user pressed the meta key.
• wheel - (number) The amount of third button scrolling.
• code - (number) The keycode of the key pressed.
• page.x - (number) The x position of the mouse, relative to the full window.
• page.y - (number) The y position of the mouse, relative to the full window.
• client.x - (number) The x position of the mouse, relative to the viewport.
• client.y - (number) The y position of the mouse, relative to the viewport.
• key - (string) The key pressed as a lowercase string. key can be 'enter', 'up', 'down', 'left', 'right', 'space', 'backspace', 'delete', and 'esc'.
• target - (element) The event target, not extended with $ for performance reasons.
• relatedTarget - (element) The event related target, NOT extended with $.

Примеры:

$('myLink').addEvent('keydown', function(event){

    //The passed event parameter is already an instance of 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.'); //Executes if the user hits Ctr+S.

});

����������:

• Accessing event.page / event.client requires the page to be in Standards Mode.
• Every event added with addEvent gets the mootools method automatically, without the need to manually instance it.

Event Method: stop

Stop an Event from propagating and also executes preventDefault.

Синтаксис:

myEvent.stop();

Возвращает:

• (object) This Event instance.

Примеры:

HTML:

<a id="myAnchor" href="http://google.com/">Visit Google.com</a>

JavaScript

$('myAnchor').addEvent('click', function(event){

    event.stop(); //Prevents the browser from following the link.
    this.set('text', "Where do you think you're going?"); //'this' is Element that fires the Event.

    (function(){
        this.set('text', "Instead visit the Blog.").set('href', 'http://blog.mootools.net');
    }).delay(500, this);

});

����������:

• Returning false within the function can also stop the propagation of the Event.

Смотрите также:

• Element.addEvent, Element.stopPropagation, Event.preventDefault, Функция:delay

Event Method: stopPropagation

Cross browser method to stop the propagation of an event (this stops the event from bubbling up through the DOM).

Синтаксис:

myEvent.stopPropagation();

Возвращает:

• (object) This Event object.

Примеры:

"#myChild" does not cover the same area as myElement. Therefore, the 'click' differs from parent and child depending on the click location:

HTML:

<div id="myElement">
    <div id="myChild"></div>

</div>

JavaScript

$('myElement').addEvent('click', function(){

    alert('click');
    return false; // equivalent to stopPropagation.
});
    $('myChild').addEvent('click', function(event){

    event.stopPropagation(); // this will prevent the event to bubble up, and fire the parent's click event.
});

Смотрите также:

• Element:addEvent
• MDC event.stopPropagation

Event Method: preventDefault

Cross browser method to prevent the default action of the event.

Синтаксис:

myEvent.preventDefault();

Возвращает:

• (object) This Event object.

Примеры:

HTML:

<form>
    <input id="myCheckbox" type="checkbox" />
</form>

JavaScript

$('myCheckbox').addEvent('click', function(event){
    event.preventDefault(); //Will prevent the checkbox from being "checked".

});

Смотрите также:

• Element:addEvent
• MDC event.preventDefault

Hash: Event.Keys

Additional Event key codes can be added by adding properties to the Event.Keys Hash.

Пример:

Event.Keys.shift = 16;
$('myInput').addEvent('keydown', function(event){

    if (event.key == "shift") alert("You pressed shift.");
});