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

Мітки: javascript

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

← Паттерн Спостерігач (Observer) в PHPMVC в невеликих web-додатках →
Що ще за власні події?
По простому, власні події це події, які ви вважаєте настільки важливими, що хочете виконувати певну дію з виникнення цієї події. Нічого не зрозуміло? Так, мені видається що я навіть самого себе заплутав. Власна подія, це як рідні події (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]
дякую за цю статю на українські.

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


 

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

Ім'я


E-mail


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