Тема: EventDispatcher.js
Показать сообщение отдельно
  #1 (permalink)  
Старый 09.10.2015, 16:23
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

EventDispatcher.js
Всем привет!
У многих (в том числе и у меня) возникает ситуация, когда нужно своим классам назначить какие-либо обработчики событий, а через свойство (например: onEventName) вешать их очень не удобно, особенно когда нужно повесить несколько действий на одно и то же событие.

В последнее время частенько пишу на ActionScript 3.0 и там есть класс EventDispatcher, но всё никак не понимаю, почему до сих в JS нет такого нативного класса? Поэтому, я решил написать свою реализацию такого класса.

Подключение:
Подключение не составит особого труда, особенно если Вы не новичок в веб-разработке.
<script src="/myFolder/scripts/EventDispatcher.js"></script>

Настоятельно рекомендую подключать скрипты в head.

Документация:

Основная функция для инициализации методов в Ваш класс:

EventDispather(self:Object, dontUseProto:boolean = false):void
  • self — Ссылка на Ваш не инициализированный объект класса (см. пример ниже)
  • dontUseProto — Если true, то методы будут присвоены не через __proto__, - это полезно, если Вы уже наследуете что-либо другое через __proto__.

Методы (будут доступны в Вашем классе после инициализации):

addEventListener(type:String, listener:Function):void
Регистрирует объект прослушивателя события на объекте.
  • type — Тип события.
  • listener — Функция прослушивателя, обрабатывающая событие. Эта функция должна принимать объект Event в качестве единственного параметра и не должна что-либо возвращать.

dispatchEvent(event:*, dontUseProp:Boolean = true):void
Посылает событие в поток событий. Целью события является объект, для которого вызывается данный метод.
  • event — Объект Event или строка, передаваемые в поток событий.
  • dontUseProp — Если true, то будут срабатывать события-свойства вида oneventname. По умолчанию true.

hasEventListener(type:String):Boolean
Проверяет, имеет ли объект прослушиватели, зарегистрированные для определенного типа события.
  • type — Тип события.

removeEventListener(type:String, listener:Function):void
Удаляет прослушиватель из объекта. При отсутствии прослушивателя, зарегистрированного с объектом, вызов этого метода не оказывает эффекта.
  • type — Тип события.
  • listener — Удаляемый объект прослушивателя.

Пример:
//Создаем тестовый класс
function MyClass() {
	this.bar = 'Hello world!';
}

MyClass.prototype.foo = function() {
	this.dispatchEvent('foo'); //Вызываем событие "foo"
	//this.dispatchEvent(new Event('foo')); //Способ вызова с объектом Event
}

/*Используйте один из ниже перечисленных способов инициализации*/

//1-й способ
EventDispatcher(MyClass);

//2-й способ
EventDispatcher(MyClass, true); //__proto__ не будет использоваться

//3-й способ
MyClass.prototype.__proto__ = EventDispatcher.prototype;


//Инициализируем класс и вешаем обработчики
var test = new MyClass();

test.addEventListener('foo', function(event) {
	console.log(this.bar);
});
test.addEventListener('foo', function(event) {
	console.log(this.bar);
});

test.onfoo = function(event) {
	console.log(this.bar);
};

test.foo(); //Результат "Hello world!", "Hello world!", "Hello world!"


Ещё стоит отметить, что в IE9 нельзя использовать __proto__ - поэтому, 3-й способ работать не будет, а первый будет эквивалентен второму.

Сам JS-файл качайте в прикреплении.
Вложения:
Тип файла: zip EventDispatcher.zip (897 байт, 8 просмотров)

Последний раз редактировалось ruslan_mart, 21.10.2015 в 08:26.
Ответить с цитированием