Начало · Справочники · Курсы · Разговоры

leechy.ru · Сайт почти придуман

События для начинающих

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

Что такое событие?

Это в принципе простой вопрос, на который может ответить каждый. Событие для каждого — это что-то важное, что случилось. Что-то на что нужно как-то реагировать или просто иметь ввиду.

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

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

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

Кроме того, что есть более и менее важные, события бывают предназначеные разным элементам браузера. Есть события, которые относятся ко всему браузеру в целом, а есть такие, которые предназначены конкретно загруженной странице и даже такие, которые относятся определенным элементам на странице. Например когда пользователь набирает какой-то текст в элементе формы — это событие, которое относится конкретно к элементу типа textarea или input (type="text"). Далее мы будем обсуждать именно события, которые относятся к загруженному документу и его элементы.

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

Обработка событий

Предположим событие произошло, например, пользователь ввел адрес (в адресной строки) и нажал Enter. Для браузера это событие, которое называется в вольном переводе «нужно загрузить страницу с таким-то адресом». При наступлении этого события браузер запускает функцию, которая отвечает за связь с сервером, с которого будет грузиться страница, за то, чтобы загрузить текст страницы, загрузить все упомянутые в ней картинки и другие элементы и другие элементы и т.д.

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

То, что важно — это знать, что к каждому событию (может быть) привязана какая-то функция, которая запускается при наступлению этого самого события. Именно эта функция отвечает за то, чтобы узнать все необходимые данные о событии и в зависимости от них — произвести какие-то действия.

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

Обработка событий в браузере

То, что браузер обрабатывает события и делает то, чего его просят, однозначно хорошо. То, что еще лучше, это то, что с появлением первого скриптового языка JavaScript 1.0 в Netscape 2, появилась возможность самим писать функции, которые выполнялись бы при конкретных событий — обработчики.

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

Самое главное для обработки события — это его перехват. Это то, каким образом нужно браузеру сказать, что если пользователь кликнул сделал то или иное действие нужно выполнить ту или иную функцию. На момент написания этой статьи есть три способа перехватить событие.

Первый способ, это прописывание обработчика в HTML'ном коде. Этот способ появился раньше всех и на данный момент наверное является самым распространенный из всех. Это также является практически единственный способ, с помощью которого можно передавать любые параметры вызываемым функциям, хотя при правильном планировании это очень редко необходимо. Это также самый «тяжелый» способ — при его применении необходимо прописывать вызов функции в каждом элементе страницы, где она нужна, что очень часто сильно увеличивает объем HTML-кода.

Второй способ появился вместе с появлением уже упомянутого объекта event — в четвертых версиях Netscape Navigator и Interner Explorer. Суть в том, что обработчик для определенного события прописывается не в HTML'е. Как известно с помощью JavaScript уже можно обращаться к отдельным элементам и есть возможность указывать обработчики определенных событий для определенных элементов. Таким образом можно заметно сократить код страницы, просто пробежавшись по необходимым элементам перехватывая необходимые события.

Третий, реже всего используемый, но с самым большим потенциалом, является способ присваивания т.н. «поведений». В MSIE5 появилась возможность задания CSS-свойства behavior, с помощью которого можно задать обработчики разных событий как отдельным элементам, так и например всех элементов одного класса. К сожалению этот способ работает (из известных мне систем) только в версии MSIE для Windows. Разработчики Mozilla, конечно подобное поведение браузера понравилось и они придумали подобную, но к сожалению несовместимую с behaviors технологию — XBL (eXtensible Binding Language), основанную на XML. Обе технологии предложены к рассмотрению W3C (и похоже обе будут отвергнуты ;-), но это не мешает использовать обоих прямо сейчас.

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

  1. Перехват события в HTML'е
  2. Перехват с помощью скрипта
  3. Поведение элементов