| STALKER | Дата: Суббота, 17.12.2011, 20:03 | Сообщение # 1 |
|
Генералиссимус
Группа: Администраторы
Сообщений: 139
Статус:  | Создаем пользовательские события в JavaScript
По идее, все, кого может заинтересовать эта статья уже знакомы с событиями в JavaScript, но для полноты, я все же повторюсь. Само слово «события», как не странно, четко передает смысл этой особенности языка. События в JavaScript генерируются при определенных действиях со стороны пользователя. К примеру: клик мышкой на определенный элемент, наведение курсора на элемент, нажатие клавиши, завершение загрузки определенного элемента, завершение отправки запроса и т.д.
Так вот, на днях, расширяя возможности одного моего скриптика, выполняющего функции сортировки Drag'n'Drop, мне понадобилось каким-то образом, при необходимости, добавлять определенные действия при завершении перетаскивания (к примеру отправку запроса на сервер, который собственно сообщит об изменении порядка элементов). Конечно, я мог бы отредактировать этот скрипт, просто добавив в него дополнительный функционал, но беда в том, что этот скрипт я использую и на другой странице, где такой функционал не нужен. Вот тут меня и осенило, ведь завершение перетаскивания — это событие, на которое можно вешать функцию, расширяя при этом функционал основной функции. JavaScript не дает возможности создавать пользовательские события, но это можно сделать, с помощью функции. Как ни странно, в интернете на эту тему разговоры ведутся, но готовое решение мне на глаза не попалось (не считая решений с встроенной функцией пользовательских событий в jQuery). В итоге я решил написать такую функцию сам и, соответственно, решил поделится с вами. Быть может еще кто-то не додумывался до такого:
Code /***********************
* Создание пользовательских событий
***********************/
var ev = {
evArr: new Array(),
cast: function (eName) {
for (var fName in this.evArr[eName]) {
this.evArr[eName][fName](arguments);
}
},
attach: function (eName, func, fName) {
if (typeof this.evArr[eName] != 'object') {
this.evArr[eName] = new Array();
}
this.evArr[eName][fName] = func;
},
detach: function (eName, fName) {
delete this.evArr[eName][fName];
}
};
Использовать обьект очень просто. Для этого вам нужно в интересующей вас функции добавить строчку:
Code ev.cast('любое название события'[, переменная_1, переменная_2, …, переменная_n)
Все переменные, переданные в этот метод будут доступны в вызываемых функциях, в виде массива в качестве первого аргумента. Причем нулевой элемент массива будет равен названию события.
Что бы повесить функцию на обработчик события, достаточно вызвать следующий метод:
Code ev.attach('название_события', функция, 'идентификатор_функции');
идентификатор_функции — этот идентификатор нужен для того, что бы потом можно было, при желании снять функцию с обработчика.
Что бы удалить функцию с обработчика события, используйте метод:
Code ev.detach('название_события', 'идентификатор_функции');
С этим методом, думаю, никаких дополнительных разьяснений не требуется.
Источник
|
| |
| |
