Визначення і використання власних подій в Javascript

Мітки: javascript

Определение и использование собственных событий в JavaScript Определение и использование собственных событий в JavaScript
JavaScript defining and using custom events JavaScript defining and using custom events

Що ще за власні події?
По простому, власні події це події, які ви вважаєте настільки важливими, що хочете виконувати певну дію з виникнення цієї події. Нічого не зрозуміло? Так, мені видається що я навіть самого себе заплутав. Власна подія, це як рідні події (onclick, onload і так далі) за винятком того, що ви самі визначаєте, за яких умов вони повинні спрацьовувати.
Деякі вже існуючі рішення удаються до використання бібліотеки Yahoo User Interface (YUI). Я не використовую YUI. Я написав простий клас, він не залежить від бібліотеки і дозволяє вам реалізовувати власні події.

Клас
Ось простий клас JavaScript, який буде базою для створення наших власних подій.
Прибрати підсвітку коду
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var CustomEvent = function() {
    //назва події
    this.eventName = arguments[0];
    var mEventName = this.eventName;
 
    //функція, яка викликається при виникненні події
    var eventAction = null;
 
    //прив’язка функції до події
    this.subscribe = function(fn) {
        eventAction = fn;
    };
 
    //виникнення події
    this.fire = function(sender, eventArgs) {
        this.eventName = eventName2;
        if(eventAction != null) {
            eventAction(sender, eventArgs);
        }
        else {
            alert('Подія ' + mEventName + ' не зв\’язана з жодною з  функцій!');
        }
    };
};

Отже, у нас є клас, який визначає назви подій, прив'язує виконувані функції до подій, і метод для виконання події. Все доволі просто.

Простий приклад
Ось простий приклад установки власної події.
Прибрати підсвітку коду
1
2
3
4
var myEvent = new CustomEvent("my event");
myEvent.subscribe(function(sender, eventArgs) {
    alert(eventArgs.message);
});

Цей код створить сутьність CustomEvent і привласнить їй ім'я “my event”, вельми креативна назва :). Потім, за допомогою методу він прив'язує функцію до події. Функція, яку призначили до події, видасть вікно alert із значенням аргументу події. Відправник і eventArgs зможуть пройти коли буде викликано подію. Ми поглянемо на це далі.

Виклик події
Напослідку, ми викличемо подію. Це може бути зроблено в будь-якому місці вашого додатку.
Прибрати підсвітку коду
1
2
3
myEvent.fire(null, {
    message: 'ви тільки що викликали власну подію під назвою ' + this.eventName + '!'
});

Ми привласнили значення null для аргументу в якому вказується відправник, оскільки у нас немає ініціатора події в цьому випадку. Наприклад, якщо ви створили цю подію в додатку фото галереї і викликаєте кожного разу при збільшенні фотографії (onEnlarge?), ви, напевно, зробите відправником об'єкт фотографії яка була збільшена. Це дозволило б вам пропускати фото у ваш метод для збільшення зсередини події.

Можливості безмежні
І, нарешті, ми привласнюємо значення до повідомлення. Відмітьте, що eventArgs це об'єкт JavaScript ({} або new Object()). Це важливо для розуміння того як правильно використовувати eventArgs.
Успішного Вам створення подій.

Оригінал: JavaScript defining and using custom events

Рейтинг: 12345   << Ви можете поставити оцінку цій статті


Подібні статті:
   Розуміння області видимості в об’єктно-орієнтованому JavaScript
   Поглиблений дебаг в JavaScript


Обговорення статті:

 
morfie [2010-10-30]
дякую за цю статю на українські.

пс.класний блог .
Я почитаю кілька днів :) .


asnix2f1fk2 [2016-04-05]
<a href=http://buycitalopram.trade/>citalopram< /a>


 

Залишити коментар:

Ім'я


E-mail


Повідомлення