15. Введение в jQuery
Модель событий jQuery
Как отмечалось ранее, программное обеспечение современных приложений работает в основном усилиями обработчиков событий. Происходит это так:
|
|
|
|
|
|
|
|
|
Мы уже видели, насколько трудно организовать работу с событиями из-за того, что браузер IE игнорирует стандарты. Вспомним эти проблемы.
- Методы, назначающие и удаляющие обработчики, разные в DOM W3C и IE: addEventListener и removeEventListener в DOM W3C, attachEvent и detachEvent в IE.
- Объект Event передается в обработчик в виде аргумента в DOM W3C и присваивается свойству window.event в IE.
- Наборы свойств и методов объекта Event в DOM W3C и IE отличаются.
- Для прерывания распространения события в DOM W3C применяется метод stopPropagation(), а в IE за это отвечает свойство cancelBubble, которое нужно установить в true.
- Для отмены действия по умолчанию в DOM W3C применяется метод preventDefault(), а в IE за это отвечает свойство returnValue, которое нужно установить в false.
- DOM W3C поддерживает фазу захвата и фазу всплытия, IE только фазу всплытия. Отсутствие фазы захвата, необходимой для организации перемещения экранных объектов, IE компенсирует методами setCapture() и releaseCapture().
Одним словом, головная боль разработчику универсального приложения обеспечена.
К счастью, библиотека jQuery закрывает проблемы межбраузерной совместимости, предлагая свою универсальную модель событий. Эта модель будет работать во всех современных браузерах, в том числе и в IE.
Не считая отсутствия поддержки фазы захвата, модель событий jQuery близка к стандарту DOM W3C. Доступ к объекту Even организован в ней, как к аргументу обработчика, а имена наиболее часто используемых свойств этого объекта нормализированы.
Для подключения обработчика события jQuery предлагает метод bind:
| bind(eventType, data, listener) |
|---|
| Устанавливает функцию listener, как обработчик события eventType, во все элементы обёртки. Необязательный аргумент data представляет собой объект, присоединённый к объекту Event — через него при необходимости можно передавать данные в обработчик (такой возможности нет ни в DOM W3C, ни в IE). |
В приведенном ниже примере к элементу с id="el" прикрепляется обработчик события click, заданный в виде функционального литерала:
$('#el').bind('click', function (event) {alert('На мне щёлкнули');};
Кроме команды bind библиотека jQuery предлагает команду one, которая устанавливает обработчик однократного запуска:
| one(eventType, data, listener) |
|---|
| Устанавливает функцию listener, как обработчик события eventType, во все элементы обёртки. После выполнения обработчик события автоматически отключается. |
Удалить обработчик можно при помощи команды unbind:
| unbind(eventType, listener) |
|---|
| Удаляет обработчик события из всех элементов обертки. |
Для остановки распространения события и одновременной отмены действия по умолчанию, достаточно из обработчика jQuery вернуть false.
В дополнение к этому jQuery предлагает следующие интересные команды для работы с событиями:
| toggle(listenerOdd,listenerEven) |
|---|
| Устанавливает для всех элементов обёртки два обработчика щелчка мыши, сменяющие друг друга. Обработчик listenerOdd будет срабатывать на каждом нечетном щелчке, listenerEven — на каждом чётном. |
| hover(overListener,outListener) |
| Устанавливает обработчики событий mouseover и mouseout для всех элементов обертки. |
Наконец, jQuery предлагает методы для установки обработчиков, связанных с конкретными событиями:
|
blur(listener) change(listener) click(listener) dblclick(listener) error(listener) focus(listener) keydown(listener) keypress(listener) keyup(listener) load(listener) mousedown(listener) mousemove(listener) mouseout(listener) mouseover(listener) mouseup(listener) resize(listener) scroll(listener) select(listener) submit(listener) unload(listener) |
|---|