Type: Element

Розширює Element тип, додаючи делегування подій до його системи подій.

Event делегування — це поширена практика, коли обробник подій прив'язується до батьківського елемента для відстеження його дочірніх елементів, а не прив'язування подій до кожного окремого дочірнього елемента. Це ефективніший підхід для динамічного контенту або високоінтерактивних сторінок з великою кількістю DOM-елементів.

Демо:

• Element.Delegation

Приклад:

Приклад того, як зазвичай застосовується делегування. Делегування є особливо корисним при роботі з динамічним контентом, таким як AJAX.

var myElement = $('myElement');
var request = new Request({
    // other options
    onSuccess: function(text){
        myElement.set('html', text); // No need to attach more click events.
    }
});
// Adding the event, notice the :relay syntax with the selector that matches the target element inside of myElement.
// Every click on an anchor-tag inside of myElement executes this function.
myElement.addEvent('click:relay(a)', function(event, target){
    event.preventDefault();
    request.send({
        url: target.get('href')
    });
});

Примітки:

• Делегування є особливо корисним, якщо ви використовуєте AJAX для динамічного завантаження контенту на сторінки, оскільки вміст елемента може змінюватися з додаванням нових елементів або видаленням інших, а ваші делеговані події не потребують змін.
• Делегуючи події батьківським об'єктам, ви можете суттєво підвищити ефективність своїх сторінок. Розгляньте приклад вище. Ви могли б прив'язати події до кожного посилання на сторінці — що може становити сотні DOM-елементів — або ж делегувати подію до body документа, виконуючи ваш код лише тоді, коли користувач фактично клікне по посиланню (замість при завантаженні сторінки/domready).
• Ви можете використовувати будь-який селектор у поєднанні з будь-якою подією
• Будьте обережні з витратами на делегування; наприклад, делегування mouseover/mouseout на всьому документі може змусити вашу сторінку постійно запускати селектор, коли користувач переміщує мишу по сторінці. Делегування не завжди є найкращим рішенням.
• Загалом завжди краще делегувати до найближчого батьківського елемента ваших елементів; наприклад, делегуйте до елемента на сторінці, а не до body документа.

Element method: addEvent

Делегує методи дочірніх елементів елемента до батьківського елемента для більшої ефективності, коли надано селектор. Інакше це працюватиме як addEvent.

Синтаксис:

myElement.addEvent(typeSelector, fn);

Аргументи:

1. typeSelector - (string) Назва події (click, mouseover тощо), яка повинна відстежуватися в поєднанні з селектором (див. приклад), щоб обмежити функціональність дочірніми елементами.
2. fn - (function) Функція зворотного виклику, яка виконується при виникненні події (передається подія так само, як і при будь-якому іншому addEvent використанні та другий аргумент — елемент, що відповідає вашому селектору, по якому клікнули).

Приклад:

// Alerts when an anchor element with class 'myStyle' is clicked inside of myElement
document.id(myElement).addEvent('click:relay(a.myStyle)', function(){
    alert('hello');
});
 
 
document.id('myElement').addEvent('click:relay(a)', function(event, clicked){
    event.preventDefault(); //don't follow the link
    alert('you clicked a link!');
    // You can reference the element clicked with the second
    // Argument passed to your callback
    clicked.setStyle('color', '#777');
});

Повертає:

• element — Цей елемент.

Element method: addEvents

Делегує події до батьківського елемента так само, як і addEvent вище. Працює як addEvents.

Приклад:

$('myElement').addEvents({
    // monitor an element for mouseover
    mouseover: fn,
    // but only monitor child links for clicks
    'click:relay(a)': fn2
});

Element method: removeEvent

Видаляє метод з елемента, як removeEvent.

Приклад:

var monitor = function(event, element){
    alert('you clicked a link!');
};
 
$('myElement').addEvent('click:relay(a)', monitor);
// link clicks are delegated to element
 
// remove delegation:
$('myElement').removeEvent('click:relay(a)', monitor);

Element method: removeEvents

Видаляє серію методів з делегування, якщо функції використовувалися для делегування, інакше працює як removeEvents.

Приклад:

var monitor = function(){
    alert('you clicked or moused over a link!');
};
 
$('myElement').addEvents({
    'mouseover:relay(a)': monitor,
    'click:relay(a)': monitor
});
 
// link clicks are delegated to element
// remove the delegation:
$('myElement').removeEvents({
    'mouseover:relay(a)': monitor,
    'click:relay(a)': monitor
});
 
// remove all click:relay(a) events
$('myElement').removeEvents('click:relay(a)');