Самый быстрый способ выучить английский язык
Раздел: Сайтостроение / JavaScript /
Основные события в JavaScript
Ранее я кратко рассказал о событиях в JavaScript и их обработчиках. Не хотел развивать эту тему дальше, поскольку она очень объёмная и довольно сложная. Но всё-таки решил написать ещё одну небольшую статью...
Как всегда напоминаю, что полный обучающий курс по JavaScript можно найти здесь:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>
В исходной (базовой) модели обработки событий, которая поддерживается всеми браузерами, событие - это внутреннее “дело” браузера. В этой модели код на JavaScript не может непосредственно управлять событием.
И когда мы говорим о виде события (в исходной модели), то на самом деле мы имеем в виду имя обработчика события. Обработчик события вызывается в ответ на событие.
В исходной модели код обработки событий задаётся с помощью атрибутов
элементов HTML-страницы.
Например, если вам нужно знать, что пользователь щёлкнул мышью по картинке,
то используется атрибут onclick тега <img>.
То есть в данном случае onclick является именно атрибутом тега, а не видом события. Но через этот атрибут браузер понимает, с обработчиком какого события связан этот атрибут.
Пример:
<img src="picture.jpg"
onclick="document.write('Вы щёлкнули по картинке');">
В этом примере мы как раз обрабатываем щелчок мышью по картинке.
В исходной модели обработки событий есть довольно много подобных атрибутов. Эти атрибуты-обработчики перечислены в таблице ниже. Это стандартный набор атрибутов HTML-4. Однако надо помнить, что не для всех тегов можно эти атрибуты использовать (с какими тегами это возможно - см. в третьем столбце таблицы).
Элементы HTML, которые не поддерживают данный тип событий, обычно размещаются в разделе <head> документа или не имеют графического представления. Универсальные атрибуты обработчиков событий мыши не поддерживаются такими элементами, как <applet>, <bdo>, <br>, <font>, <frame>, <frameset>, <head>, <html>, <iframe>, <isindex>, <meta> и <style>.
| Обработчик | Условия вызова | Поддерживается |
onerror |
Ошибка при загрузке изображения | <img> |
onfocus |
Элемент получил фокус ввода | <button>, <input>, <label>, <select>, <textarea>, <body> |
onkeydown |
Клавиша нажата. Для отмены возвращает false |
Элементы формы и <body> |
onkeypress |
Клавиша нажата и отпущена. Для отмены возвращает false |
Элементы формы и <body> |
onkeyup |
Клавиша отпущена | Элементы формы и <body> |
onload |
Загрузка документа завершена | <body>, <frameset>, <img> |
onmousedown |
Нажата кнопка мыши | Большинство элементов |
onmousemove |
Перемещение указателя мыши | Большинство элементов |
onmouseout |
Указатель мыши выходит за границы элемента | Большинство элементов |
onmouseover |
Указатель мыши находится на элементе | Большинство элементов |
onmouseup |
Отпущена кнопка мыши | Большинство элементов |
onreset |
Запрос на очистку полей формы. Для предотвращения очистки возвращает false |
<form> |
onresize |
Изменение размеров окна | <body>, <frameset> |
onselect |
Выбор текста | <input>, <textarea> |
onsubmit |
Запрос на передачу данных формы. Чтобы предотвратить передачу, возвращает false |
<form> |
onunload |
Документ или набор фреймов выгружен | <body>, <frameset> |
Эта статья - лишь краткое знакомство с ООП в JavaScript. Если хотите знать больше, то вам сюда:
>>> JavaScript, jQuery и Ajax с нуля до гуру >>>