From Learn About the Ext JavaScript Library

В Javascript, обработка событий, это одна из тех вещей, которыми вы будете пользоваться очень часто. Это может быть не тривиальной задачей, хотя бы потому, что различия в реализации разных браузеров потребуют нормализации событийной модели. Однако ExtJS позволяет упростить обработку событий и иногда даже позабавить(!).

Contents 1 Очень простой пример 2 Контекст функции обработчика 3 Передача аргументов 4 Использование события 5 Параметры события 6 Пользовательские аргументы 7 Присоединение нескольких обработчиков 8 Заключение

Очень простой пример

Представьте, например, что вам надо вывести сообщение пользователю, когда он нажимает на ссылку. Пожалуйста не останавливайтесь на этом примере и читайте дальше, т.к. вы вероятно хотите узнать больше перед тем, как начнете использовать обработку событий.

var el = Ext.get('somelink');
el.on('click', function(){
    alert('вы нажали на ссылке');
});

Обратите внимание, здесь мы используем функцию анонимного обработчика. Помимо этого важно знать, что вы должны выполнять этот код только после того, как DOM будет проинициализирован (используйте функцию Ext.onReady()).

Контекст функции обработчика

Хорошо, мы только что изучили основы обработки событий. Давайте рассмотрим что еще мы можем сделать. Изначально, контекстом функции обработчика будет HTML элемент, к которому вы привяжете событие. Далее, в любое время, ключевое слово this будет указывать на контекст и через него можно сослаться на HTML элемент.

var el = Ext.get('somelink');
el.on('click', function(){
    alert(this.id); // выведет сообщение 'somelink'
});

Но что если мы захотим изменить контекст обработчика на что-нибудь другое? Вы можете передать объект в качестве аргумента области видимости.

onClick = function(){
    alert(this.someProperty); // здесь будет выведено сообщение 'someValue'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

Примечание: подробнее о контексте вы можете узнать перейдя по этой ссылке

Передача аргументов

В предыдущем примере мы рассмотрели как можно изменить контекст для функции обработчика. Но что если нам надо иметь доступ к элементу. Для этого мы можем воспользоваться аргументами, переданными через функцию обработчика.

onClick = function(ev, target){
    alert(this.someProperty); // здесь будет выведено сообщение 'someValue'
    alert(target.id); // здесь будет выведено сообщение 'somelink'
};
 
var scope = {
    someProperty : 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, scope);

Как видно из примера выше мы воспользовались вторым аргументом (target), а первый аргумент, это объект Event библиотеки Ext. Можно найти массу применений этому объекту.

Использование события

Объект Event библиотеки Ext, передаваемый обработчику события имеет множество полезных свойств и методов. Приведем несколько примеров:

onClick = function(ev, target){
    ev.preventDefault(); // Блокирование стандартной обработки события в браузере
    ev.stopPropagation(); // Отмена всплытия события (event bubbling)
    ev.stopEvent() // preventDefault + stopPropagation
 
    var target = ev.getTarget() // Получение цели события (тоже что и аргумент)
    var relTarget = ev.getRelatedTarget(); // Получение связанной цели
};

Подробнее о других моментах работы с EventObject библиотеки Ext смотрите в документации.

Параметры события

Существуют несколько настраиваемых параметров для событий. Приведу несколько примеров:

Отложенные слушатели (отложенный вызов событий)

el.on('click', this.onClick, this, {delay: 250});

Буферизированные слушатели (буферы события, гарантирующие только один вызов в указанный интервал)

el.on('click', this.onClick, this, {buffer: 100});

Слушатели типа "Обработчик" (предотвращают стандартную обработку и, опционально, останавливают её)

// предотвращает стандартную обработку
el.on('click', this.onClick, this, {preventDefault: true});
 
// только останавливает обработку
el.on('click', this.onClick, this, {stopPropagation: true});
 
// предотвращает стандартную обработку и останавливает
el.on('click', this.onClick, this, {stopEvent: true});

Другие параметры

el.on('click', this.onClick, this, {
    single: true, // автоматически удаляется после первого вызова:
    delegate: 'li.some-class' // Автоматическое делегирование события!
});

Пользовательские аргументы

Существует возможность передать обработчику события собственные аргументы. Это может быть полезно, если требуется использовать переменную внутри обработчика без изменения области видимости, добавления её в объект области видимости или использования замыкания (?). Для этого вам просто надо поместить пользовательские переменные в отдельный объект параметров.

function onClick(ev, target, options){
   alert(options.someProperty); // выведет 'someValue'
}
 
var el = Ext.get('somelink');
el.on('click', onClick, null, {someProperty: 'someValue'});

Присоединение нескольких обработчиков

Если требуется присоединить несколько обработчиков к одному элементу, вы можете сделать это одним вызовом функции.

el.on({
    'click' : {
    	fn: this.onClick,
	scope: this,
	delay: 100
    }, 
    'mouseover' : {
    	fn: this.onMouseOver,
	scope: this
    },
    'mouseout' : {
    	fn: this.onMouseOut,
        scope: this
    }
});

Заключение

Как видите, Ext предоставляет обширную функциональность, которая облегчит вашу жизнь при работе с событиями. Мы раскрыли все базовые понятия, но, если вам этого недостаточно, посетите пост Джека Слокума (Jack Slocum) на форуме.