Урок №6 (События JavaScript, Функции (продолжение))

1. Введение

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

2. Что такое события в JavaScript

Будет смешно, если вы не знаете, что такое события. Событие – это какое-либо действие (это понятно). А события для JS – это тоже события, только осуществляемое пользователем либо браузером. Например, когда мы щелкаем (кликаем) на ссылке – осуществляется событие, его обрабатывает браузер и перенаправляет нас на нужную страницу. Кстати та часть браузера, которая обрабатывает определенное действие пользователя (событие), называется ОБРАБОТЧИКОМ. Так же, при наведении курсора (указателя мыши) на ссылку в строке состояния (обычно находится в нижней части окна браузера) отображается адрес, так как обработчик "наведения курсора на объект (в данном случае на ссылку)" помещает туда этот адрес и так далее... 

Следует различать события генерируемые, как пользователем, так и браузером.

Какие события могут быть вызваны пользователем? Например: щелчок или движение мыши, изменение данных формы и т.п. А что же может делать браузер? Такие вещи, как: окончание загрузки документа, закрытие страницы, вывод ошибки и т.п. Ведь это тоже события. 

Каждое событие для браузера имеет свое имя, к примеру: щелчок мыши – click, перемещение курсора за определенный объект – mouseout, получение фокуса (щелчок мыши на объекте, или переход к нему при помощи клавиши табуляции (Tab)) – focus, отправка формы – submit, сброс формы – reset, загрузка страницы – load, возникновение ошибки – error и т.д.

Для HTML и JavaScript обработчик события имеет имя следующего образца: on + имя_события. Например: onClick, onMouseOut, onFocus, onSubmit, onReset, onLoad... 

Ко многим событиям, которые происходят в браузере можно привязать свои обработчики, в смысле привязать код JavaScript.

2.1. Как связать событие и JavaScript

Выше было сказано, что события могут происходить по вине пользователя, либо браузера. К примеру, было упомянуто событие onClick, которое возникает при нажатии мыши. Понятно, что нажать мышью мы можем в любом месте экрана, поэтому нам нужно сфокусировать внимание на определенных элементах, к примеру, у нас на странице есть ссылка, и мы хотим отловить событие «нажатия кнопки мыши» на эту ссылку. Т.е. мы хотим обработать событие для конкретного элемента HTML, вы должны согласиться, что когда мы пытались обработать любой элемент HTML, то мы применяли к нему какие-то атрибуты, например, style, когда мы пытались изменить стиль элемента. Точно так же есть атрибуты, которые являются событиями, при помощи которых мы можем осуществить связь самого события элемента с JS кодом.

Так вот, название атрибутов и есть названия событий, которые мы описали выше, т.е. для ссылки событие onClick будет выглядеть так:

<a href="#" onClick="">Ссылка</a>

Т.е. мы сказали, что мы будем обрабатывать событие «нажатия ссылки». А теперь самое главное: чтобы сказать, что будет происходить в момент нажатия ссылки нужно указать это действие в кавычках данного атрибута (события). Понятно, что мы должны это указать на языке JavaScript, либо если вы знаете другие скриптовые языки, то на них:

<a href="#" onClick="javascript: alert('Ссылка нажата');">Ссылка</a>

Теперь смотрите: когда вы нажмете на ссылку, произойдет событие onClick, а так как для него указано конкретное действие, то выполниться определенное действие. В данном случае действие – это вывод на экран сообщения. В этой строчке вы можете указать через точку с запятой много действий, так же как и в коде JS.

Примечание:

Когда вы привязываете действие к определенному событию, то вы обязаны указать в кавычках первую фразу «javascript:», что означает, что следующий код будет воспринят, как JS код. Если не укажете, то браузер поймет то, что находиться в кавычках, как стандартный скриптовый язык для него. Мы обсуждали, что по стандарту в браузерах может и не преобладать JS, хотя он может и содержаться в нем.

2.2. Кое-что об обработчиках

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

Чтобы запретить выполнение стандартных обработчиков за вашим, необходимо в конце вашего обработчика написать return false. Попробуйте отменить стандартный обработчик ссылки.