Native: Element

• Користувацький Native для дозволу використання всіх його методів з будь-яким 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.

Див. також:

• w3schools Event Attributes

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); // this is the correct way to remove the event.

Примітки:

• Коли функція додається за допомогою Функція:bind або Функція: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, that'll be three alerts they'll have to click on.
myElement.removeEvents('click'); // This 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, необов'язково) Масив або окремий об'єкт, аргументи для передачі в функцію. Якщо більше одного аргументу, має бути масивом.
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.

Хеш: Element.Events

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

Аргументи:

Element.Events.yourproperty (об'єкт) може мати:

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

Приклади:

Element.Events.shiftclick = {
    base: 'click', //we set a base type

    condition: function(event){ //and 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');
});

Примітки:

• Існують різні типи користувацьких Events, які ви можете створити:

  1. Користувацькі Events лише з base: вони просто будуть перенаправленням на базову подію.
  2. Користувацькі Events з base та condition: вони будуть перенаправленням на базову подію, але викликаються лише за виконання умови.
  3. Користувацькі Events з onAdd та/або onRemove та будь-які інші з вищезазначених: вони також виконуватимуть додаткові функції при додаванні/видаленні події.

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

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

Користувацькі події

Event: mouseenter

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

Приклади:

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

Див. також:

• Element:addEvent

Event: mouseleave

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

Приклади:

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

Див. також:

• Element:addEvent

Event: mousewheel

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

Приклади:

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

Примітки:

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

Див. також:

• Element:addEvent