Type: Element

• Користувацький тип, що дозволяє використовувати всі його методи з будь-яким DOM-елементом через функцію долара $.
• Ці методи також доступні на window та document.

Примітки:

• Internet Explorer викликає події елементів у випадковому порядку, якщо вони не викликані Element:fireEvent.

Element Method: addEvent

Прив'язує слухача події до DOM-елемента.

Синтаксис:

myElement.addEvent(type, fn);

Аргументи:

1. type - (string) Назва події для відстеження ('click', 'load' тощо) без префікса 'on'.
2. fn - (function) Функція для виконання.

Повертає:

• (element) Цей Element.

Приклади:

HTML:

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

JavaScript

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

Примітки:

• Ви можете зупинити Event, повернувши false у слухачі або викликавши Event:stop.
• Цей метод також прив'язаний до Document та Window.

Див. також:

• MDN DOM Event Reference

Element Method: removeEvent

Працює як Element.addEvent, але замість цього видаляє вказаний слухач події.

Синтаксис:

myElement.removeEvent(type, fn);

Аргументи:

1. type - (string) Назва події.
2. fn - (function) Функція для видалення.

Повертає:

• (element) Цей Element.

Приклади:

Стандартне використання:

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

Приклади з bind:

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.

Примітки:

• Коли функція додається за допомогою Function:bind або Function:pass, то створюється нове посилання. Щоб removeEvent працювало, ви повинні передати посилання на точну функцію, яку потрібно видалити.
• Цей метод також прив'язаний до Document та Window.

Element Method: addEvents

Те саме, що й Element:addEvent, але приймає об'єкт для додавання кількох подій одночасно.

Синтаксис:

myElement.addEvents(events);

Аргументи:

1. events - (object) Об'єкт з ключ/значення, що представляє: ключ — назва події, а значення — функція, яка викликається, коли відбувається Event.

Повертає:

• (element) Цей Element.

Приклади:

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

Примітки:

• Цей метод також прив'язаний до Document та Window.

Див. також:

• Element:addEvent

Element Method: removeEvents

Видаляє всі події окремого типу з Element. Якщо аргумент не передано, видаляє всі події всіх типів.

Синтаксис:

myElements.removeEvents([events]);

Аргументи:

1. events - (необов'язково) якщо не передано, видаляє всі події з елемента.
   • (string) Назва події (напр. 'click'). Видаляє всі події цього типу.
   • (object) Об'єкт пар тип-функція. Подібний до того, що передається в Element:addEvent.

Повертає:

• (element) Цей 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.

Примітки:

• Цей метод також прив'язаний до Document та Window.

Див. також:

• Element:removeEvent

Element Method: fireEvent

Виконує всі події вказаного типу, присутні в Element.

Синтаксис:

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

Аргументи:

1. type - (string) Назва події (напр. 'click')
2. args - (mixed, необов'язково) Array або окремий об'єкт, аргументи для передачі в функцію. Якщо більше одного аргументу, має бути масив.
3. delay - (number, необов'язково) Затримка (у мс) перед виконанням події.

Повертає:

• (element) Цей Element.

Приклади:

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

Примітки:

• Це не викличе DOM Event (це стосується всіх вбудованих подій, напр. onmousedown="..").
• Цей метод також прив'язаний до Document та Window.

Element Method: cloneEvents

Клонує всі події з Element в цей Element.

Синтаксис:

myElement.cloneEvents(from[, type]);

Аргументи:

1. from - (element) Копіює всі події з цього Element.
2. type - (string, необов'язково) Копіює лише події цього типу. Якщо null, копіює всі події.

Повертає:

• (element) Цей Element.

Приклади:

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

Примітки:

• Цей метод також прив'язаний до Document та Window.

Object: Element.Events

Ви можете додати додаткові користувацькі події, додаючи властивості (об'єкти) до Element.Events Object

Аргументи:

Об'єкт Element.Events.yourProperty може мати:

1. base - (string, необов'язково) базову подію, яку буде слухати користувацька подія. Вона не є необов'язковою, якщо встановлено condition.
2. condition - (function, необов'язково) умову, з якої ми визначаємо, чи може бути викликана користувацька подія. Прив'язано до елемента, до якого додаєте подію. Передається Event.
3. onAdd - (function, необов'язково) функцію, яка викликається, коли додається користувацька подія. Прив'язано до елемента, до якого додаєте подію.
4. onRemove - (function, необов'язково) функцію, яка викликається, коли видаляється користувацька подія. Прив'язано до елемента, до якого додаєте подію.

Приклади:

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');
});

Примітки:

• Існують різні типи користувацьких подій, які ви можете створити:
  1. Користувацькі події лише з base: вони просто перенаправлятимуть на базову подію.
  2. Користувацькі події з base та condition: вони перенаправлятимуть на базову подію, але викликатимуться лише за виконання умови.
  3. Користувацькі події з onAdd та/або onRemove та будь-які інші з вищезазначених: вони також виконуватимуть додаткові функції при додаванні/видаленні події.
• З MooTools 1.3 це нативний JavaScript Object, а не екземпляр застарілого Hash

Попередження:

Якщо ви використовуєте опцію condition, ви ПОВИННИ вказати базовий тип, якщо не плануєте перезаписати нативну подію. (дуже не рекомендується: використовуйте лише тоді, коли точно знаєте, що робите).

Вбудовані користувацькі події

Event: mouseenter

Ця подія викликається, коли миша входить в область DOM Element і не викликається знову, якщо миша переходить через дочірні елементи Element (на відміну від mouseover).

Приклади:

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

Див. також:

• Element:addEvent

Event: mouseleave

Ця подія викликається, коли миша залишає область DOM Element і не викликається, якщо миша переходить через дочірні елементи Element (на відміну від mouseout).

Приклади:

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

Див. також:

• Element:addEvent

Event: mousewheel

Ця подія викликається при прокручуванні коліщатка миші;

Приклади:

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

Примітки:

• Події mouseenter та mouseleave підтримуються нативно Internet Explorer, Opera 11 та Firefox 10. MooTools додасть користувацькі події лише за необхідності.

• Ця користувацька подія просто перенаправляє DOMMouseScroll (Mozilla) на mousewheel (Opera, Internet Explorer), роблячи її кросбраузерною.

Див. також:

• Element:addEvent

Object: Element.NativeEvents

Це об'єкт з усіма відомими типами DOM-подій, такими як click, mouseover, load тощо. Кожен тип події має значення, можливі значення: 0 (undefined, null), 1, та 2.

Події типу 0

За замовчуванням це undefined. У цьому випадку ви можете додавати події, але повинні викликати їх вручну.

Приклад:

element.addEvent('pizza', fn);
element.fireEvent('pizza', 'yum!');

Подія не додається до DOM фактично, а лише реєструється в JS-об'єкті.

Події типу 1

Другий випадок — якщо значення дорівнює 1. На цей раз об'єкт прив'язується до DOM. Зазвичай через element.addEventListener, або element.attachEvent у старих версіях IE. Ви все ще можете використовувати element.fireEvent('load') для ручного виклику подій.

Події типу 2

Останній випадок — якщо значення дорівнює 2. Це те саме, що й випадок 1. Єдина різниця полягає в тому, що об'єкт події, що містить ці