Добавление обработчиков событий

19-06-2019

Чем отличается обработчик события (event handler) от слушателя события (event listener)? Обработчик может остановить событие, а слушатель нет. С этой точки зрения все (за редким исключением) функции, прикрепляемые к событиям DOM узлов, являются обработчиками. Бывают даже случаи, когда в функцию передается объект event, хотя никакие его параметры не нужны. Просто функция содержит в себе логику – останавливать событие или нет (а для остановки ей нужен объект event). Однако этот нюанс чаще всего не учитывают в терминологии, и обработчики часто называют слушателями. Не беда, главное помнить, что фактически они обработчики.

Для добавления обработчиков событий нам будет служить метод

addEventHandlers

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

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

jQuery.event.add(element, type, listener);

Впоследствии мы более подробно рассмотрим, как происходит добавление обработчиков событий, какие дополнительные возможности есть у библиотечных функций, какие у них плюсы и минусы. А в конце напишем для компонентов метод addEventHandler, который будет специально оптимизирован под его использование в компонентах.

А пока сосредоточим свое внимание на общих вопросах:

как должна называться функция-обработчик события что должно быть в ее теле?

Все круто, только это не будет работать потому что в любом обработчике события this – это всегда ссылка на элемент, который породил это событие. А нам жизненно необходимо, чтобы this в методах класса указывал все-таки на тот объект, на котором вызван этот метод. Решение приходит очень быстро: нужно обернуть наш метод в некую анонимную функцию – в ней this будет какой угодно, главное что в методе this будет указывать на экземпляр класса.

Упс, опять не работает. Ах ты черт – внутри функции-обертки у нас написано

this.increment(event);


Смотрите также:
 WebMoney
 Mandarin ICQ
 Поведенческие шаблоны
 Avast
 UIN - номер для аськи!

Добавить комментарий:
Введите ваше имя:

Комментарий:

Защита от спама - решите пример:


Онлайн-игры для социальных сетей:

Понравились обзоры? Читайте еще!

Новые обсуждения на форуме:

Парк аттракционов "Сегодня парки отдыха практически повсеместно вытесняются тематическими парками, хотя обычно эти два определения смешивают.."
Зачем надо учиться играть в шахматы? "Шахматы долгое время считались игрой королей и аристократов.."