Это первый, самый простой и самый распространенный способ перехвата событий. К тому-же это самый кросс-браузерный, самый универсальный и... способ у которого меньше всего шансов на выживание.

Суть

Чтобы обработать конкретное событие для конкретного элемента, нужно всего-лишь прописать в этом элементе атрибут, значение которого и будет являться телом функции обработчика. Т.е. если хотите перехватить клик мыши на кнопку формы нужно всего лишь прописать атрибут onClick, в котором укажете, что должно случиться:

<input type="button" value="Кликни меня" onClick="alert('Кликнул!');">

И все! Когда пользователь кликнет по кнопке появиться сообщение об этом:

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

• События в NN4 и раньше
• События в MSIE
• События в NN6/Mozilla

Тем не менее, есть некоторые основные вещи, которые вам нужно знать:

1. Совсем старые браузеры (до четвертых версий) дают возможность перехвата основных событий (onChange, onReset, onClick, onSubmit, onBlur, onFocus, onLoad, onUnload) только для элементов форм, ссылок и окна/документа
2. NN4 ведет себя совсем как старые браузеры, за исключением того, что умеет перехватывать события для слоев
3. Если браузер не умеет обрабатывать конкретное событие для данного элемента, то он не выводить никаких ошибок — просто игнорирует этот атрибут

Параметр(ы)

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

onClick="document.forms.myCalculatingForm.otherElement.value =    document.forms.myCalculatingForm.thisElement.value"

когда с использованием this все можно сократить до:

onClick="this.form.otherElement.value = this.value".

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

<img src="a.gif" onMouseOver="this.src = overImg.src;" onMouseOut="this.src = outImg.src;">

Короче, если перехватываете события с помощью атрибутов — используйте как можно чаще this.

Но так, как мы говорим не только о событий, но и о dHTML, то нельзя не упомянуть и об объекте event, который появился в NN4 и MSIE4. Это объект, который содержит в себе информацию о самом событие. К сожалению эта информация разная в разных браузеров и я опять приведу ссылки на разных документаций:

• Свойства event в NN4
• Свойства event в MSIE
• Свойства event в NN6/Mozilla

Объект event не только содержит разную информацию, но и становиться доступным разными способами, если назначение обработчика производиться скриптом. Еще один плюс перехвата событий в HTML'е — то, что объект event одинаково доступен всем (понимающих его) браузерам. Например, чтобы узнать тип события достаточно просто обратиться к свойству event.type:

<input type="button" value="Кликни меня" onClick="if (event) alert(event.type);">

Если у вас браузер, который знает о существовании объекта event, то при клике на кнопке должно появиться сообщение со строкой «click»

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

Еще про событий

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

Москва, 9 февраля 2002

Leechy