Как создать свой сайт → Уроки jQuery → Урок 7. Методы по обработке событий

jQuery - Урок 7. Методы по обработке событий

Сегодня мы познакомимся с некоторыми методами по обработке событий. Как всегда сначала их перечислим, а потом посмотрим пример:

ready(fn) - назначает функцию, которая будет выполняться, когда документ готов к работе.
Пример:

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

bind(type, fn) - связывает обработчик события с самим событием.
Пример:

Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init (здесь click - событие, а init - функция, обработчик события).

Давайте рассмотрим пример. Создадим список уроков по jQuery и сделаем так, чтобы при щелчке по какому-нибудь из них, в поле ниже появлялось описание выбранного урока:

Урок:

Описание:

Итак создадим сам список и поле для вывода описаний на html-странице:

<html> <head> <title>jQuery</title> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery-1.2.6.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> Урок: <select id="lesson"> <option value='1'>Урок 1</option> <option value='2'>Урок 2</option> <option value='3'>Урок 3</option> </select><br><br> Описание: <span id="desc"></span> </body> </html>

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

На странице script.js нам достаточно назначить функцию, которая будет срабатывать каждый раз, когда документ готов к работе (назовем ее init). Сама же функция init будет вызывать функцию desc каждый раз, когда выбран какой-либо пункт списка (т.е. наступает событие change):

$(document).ready(init); function init(){ $('#lesson').bind('change', desc); } function desc(){ var op=$('#lesson').val(); switch (op) { case '1': $('#desc').text('Первый урок по jQuery знакомит с основными понятиями и возможностями этой библиотеки.'); break; case '2': $('#desc').text('Второй урок по jQuery знакомит с таким понятием, как селекторы.'); break; case '3': $('#desc').text('Третий урок по jQuery знакомит с таким понятием, как фильтры.'); break; } }

Вот и все. Можете скачать исходный код примера и посмотреть, как он работает. Продолжаем изучать методы по обработке событий:

one(type, fn) - связывает обработчик события с самим событием, но выполняется он только один раз.
Пример:

Данная инструкция говорит браузеру, что при щелчке по div-у должна сработать функция init, но инструкции этой функции будут выполнены только один раз.

Если в нашем примере со списком уроков мы заменим bind на one, то функция desc сработает только один раз, т.е. при первом выборе урока из списка мы увидим описание, но далее, сколько бы мы не щелкали по пунктам списка, описание меняться не будет.

hover(over, out) - когда указатель мыши находится над объектом, срабатывает функция over, а когда указатель мыши выходит за объект, то функция out.
Пример:

первый абзац

второй абзац

третий абзац

Итак, html-код:

Код функции:

Таким образом, когда указатель мыши над абзацем, его фон - синий, а при выходе - белый.

Обратите внимание, здесь мы применили краткую запись, т.е. использовали функции без названий, а могли расписать и так:

Выбирайте ту форму записи, которая вам больше нравится.

toggle(fn1, fn2, ...fn) - переключатель между функциями. Щелчок по элементу вызывает функцию fn1, повторный щелчок - функцию fn2, третий щелчок - функцию fn3 и т.д.
Пример:

Данная инструкция говорит браузеру, что при щелчке по абзацу, его фон станет синим, при повторном щелчке - белым.

click(fn) - функция fn связывается с событием click.
Пример:

Данная инструкция говорит браузеру, что при щелчке по div-у, его фон станет синим.

click() - эмулируется возникновение события click.
Пример:

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

Вот как это выглядит на практике:

первый div

второй div

третий div

Иными словами, вызов метода с функцией в качестве аргумента, например click(fn), назначает обработчик события, вызов без аргумента, например click(), эмулирует возникновение этого события.

Аналогичные методы определены и для других событий, поддерживаемых javascript, например: blur(), blur(fn), focus(), focus(fn) и т.д. Если забыли, какие события бывают и когда наступает то или иное событие, то посмотрите здесь.

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

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