Событие при наведении мыши javascript код с пошаговой инструкцией
Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.
Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!
Все сведенья о событиях мышки
Для мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице веб-приложения. Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.
Начнем с простого
Для начала познакомимся с простыми событиями. Их всего пять. Для удобства я поместил описание каждого инструмента в таблицу, прикрепленную ниже.
| Наименование | Описание |
| mousedown | Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена. |
| mouseup | А этот срабатывает уже при отпускании зажатой ранее кнопочки. |
| mouseover | Вызывается при наведении курсора на обрабатываемый объект. |
| mouseout | Обрабатывает действие выхода курсора из области элемента. |
| mousemove | Любое движение указателя над определенной областью вызывает текущее событие. |
Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html>
<html>
<head>
<title>Пример наведения указателя на элемент страницы</title>
<meta charset="utf-8">
</head>
<body>
<img name="pic" src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley">
<h3>Наведите на изображение курсор мыши и оно изменится.</h3>
<h3>А теперь отведите его в сторону и понаблюдайте за изменениями</h3>
<script>
function ChangeOver(x) {
x.src= 'http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg';
};
function ChangeOut(x) {
x.src= 'http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg';
}
</script>
</body>
</html> |
<!DOCTYPE html> <html> <head> <title>Пример наведения указателя на элемент страницы</title> <meta charset=»utf-8″> </head> <body> <img name=»pic» src=»http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg» alt=»Smiley»> <h3>Наведите на изображение курсор мыши и оно изменится.</h3> <h3>А теперь отведите его в сторону и понаблюдайте за изменениями</h3> <script> function ChangeOver(x) { x.src= ‘http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg’; }; function ChangeOut(x) { x.src= ‘http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg’; } </script> </body> </html>
Пришло время группировки
Теперь давайте перейдем к комплексным видам. Каждый из таких событий включает в себя несколько простых. При этом все составные части комплексного события не срабатывают одновременно, а выстраиваются в очередь. Поэтому вы иногда могли наблюдать такую ситуацию, что при быстром кликанье по, к примеру, пунктам меню веб-сайта нажатия иногда не срабатывают.
Почему же так? Ответ достаточно прост.
Итак, ниже перечислены составные события.Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.
| Наименование | Описание |
| click | Вызывается при щелчке левой кнопкой мышки. Таким образом, здесь вначале срабатывает mousedown, а после mouseup. При этом порядок выполнения будет выглядеть следующим образом: mousedown → mouseup → click. |
| contextmenu | Срабатывает при клике, однако если была нажата правая кнопка мыши. Цепочка событий аналогична предыдущей. |
| Dblclick | Текущий элемент запустится на обработку после двойного щелчка на обрабатываемом объекте. Очередь вызовов будет выглядеть следующим образом (однако не в Internet Explorer 8-):
· mousedown; · mouseup+click; · mousedown; · mouseup+click+dblclick. |
Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых event-ов. Вследствие этого на сегодняшний день никто не может представить обычной обработки кнопок или других элементов без того же click.
Для практического ознакомления с функционированием выше перечисленных событий я модифицировал предыдущее приложение. Проанализируйте результат моей работы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <!DOCTYPE html>
<html>
<head>
<title>Пример наведения указателя на элемент страницы</title>
<meta charset="utf-8">
</head>
<body>
<img src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley">
<button>Нажмите на меня один раз и смайл улыбнется!</button>
<button ondblclick="Move()">А теперь нажмите на меня двойным кликом и смайл начнет двигаться!</button>
<button oncontextmenu="Cry()">Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!</button>
<script>
function Smile() {
document.getElementById('pic').src= 'http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg';
};
function Cry() {
document.getElementById('pic').src= 'http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg';
};
function Move() {
document.getElementById('pic').src= 'https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif';
};
</script>
</body>
</html> |
<!DOCTYPE html> <html> <head> <title>Пример наведения указателя на элемент страницы</title> <meta charset=»utf-8″> </head> <body> <img src=»http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg» alt=»Smiley»> <button>Нажмите на меня один раз и смайл улыбнется!</button> <button ondblclick=»Move()»>А теперь нажмите на меня двойным кликом и смайл начнет двигаться!</button> <button oncontextmenu=»Cry()»>Если хочешь вернуться к начальному состоянию, то нажми на меня правой кнопкой!</button> <script> function Smile() { document.getElementById(‘pic’).src= ‘http://storage2.vsemayki.ru/images/0/0/514/514012/previews/sign_front_white_500.jpg’; }; function Cry() { document.getElementById(‘pic’).src= ‘http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg’; }; function Move() { document.getElementById(‘pic’).src= ‘https://otvet.imgsmail.ru/download/197747824_e708b2123d2b2d745d271f15cb144dcc_800.gif’; }; </script> </body> </html>
Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.
На этой ноте я завершаю свой рассказ. Надеюсь вы почерпнули для себя что-то интересное, новое и полезное!
Если вы желаете и дальше читать мои статьи, а также узнавать о публикации новых, то подписывайтесь на обновления блога. И не забывайте делиться ссылками на понравившиеся темы с друзьями. До будущих встреч! Пока-пока!
С уважением, Роман Чуешов
Загрузка…Прочитано: 649 раз
JavaScript — Виды событий | ИТ Шеф
На этом уроке мы рассмотрим основные виды событий, которые Вы можете перехватывать с помощью JavaScript для выполнения некоторого кода.
Все события JavaScript можно разделить на следующие категории: события мыши (Mouse Events), события клавиатуры (Keyboard Events), события объектов и фреймов (Frame/Object Events), события формы и элементов управления (Form Events), события перетаскивания (Drag Events), события анимации (Animation Events), события буфера обмена (Clipboard Events), события мультимедиа (Media Events), события трансформации (Transition Events), события, посылаемые сервером (Server-Sent Events), события касания (Touch Events), события печати (Print Events), разные события (Misc Events).
Внимание: все события в JavaScript пишутся строчными (маленькими) буквами.
- mousedown — событие происходит, когда кнопка мыши нажата над некоторым элементом, но ещё не отпущена.
- mouseup — событие происходит, когда кнопка мыши над некоторым элементом перешла из состояния нажатия, в состояние отпущена.
- click — событие происходит, когда пользователь кликнул мышью на элементе. Порядок возникновения событий, связанных с click (для левой и средней кнопки мыши):
mousedown->mouseup->click. - contextmenu — событие происходит, когда пользователь кликнул правой кнопкой мышью на элементе. Порядок возникновения событий, связанных с contextmenu (для правой кнопки мыши):
mousedown->mouseup->contextmenu. - dblclick — событие происходит, когда пользователь выполнил двойной клик на элементе. Порядок возникновения событий, связанных с
dblclick:mousedown->mouseup->click->mousedown->mouseup->click->dblclick. - mouseover — событие происходит, когда курсор мыши входит в область, принадлежащей элементу или одному из его детей.
- mouseout — событие происходит, когда курсор мыши уходит из области, принадлежащей элементу или одному из его детей.
- mousemove — событие происходит, когда курсор мыши перемещается внутри области, принадлежащей элементу.
- mouseenter — событие возникает, когда указатель мыши входит в область, принадлежащую элементу. Это событие часто используется вместе с событием
mouseleave, которое происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событиеmouseenterподобно событиюmouseoverи отличается от него только тем, что событиеmouseenterне всплывает (с понятием всплытия события мы познакомимся немного позже). - mouseleave — событие происходит, когда указатель мыши уходит из области, принадлежащей элементу. Событие
mouseoutи отличается от него только тем, что событиеmouseleaveне всплывает (с понятием всплытия события мы познакомимся немного позже).
Порядок возникновения событий: keydown -> keypress -> keyup.
- keydown — событие происходит, когда нажата клавиша на клавиатуре над элементом, но ещё не отпущена.
- keyup — событие происходит, когда нажатая клавиша на клавиатуре над элементом перешла в состояние отпущено.
- keypress — событие происходит, когда пользователь нажал клавишу на клавиатуре над элементом.
- beforeunload — событие происходит, перед тем как документ будет выгружен. Это событие позволяет отображать дополнительное сообщение в диалоговом окне подтверждения «Вы действительно хотите покинуть эту страницу?». Стандартное сообщение, которое появляется при закрытии документа, может отличаться в разных браузерах. Но его Вы не можете изменить или удалить, Вы можете только с помощью этого метода добавить к нему собственное сообщение, которое будет отображаться вместе с сообщением по умолчанию.
- error — событие срабатывает при возникновении ошибки, которая происходит при загрузке внешнего файла (например, документа или изображения).
- hashchange — событие происходит при изменении якорной части (начинается с символа ‘#’) текущего URL.
- load — событие происходит, когда загрузка объекта завершена. Событие
loadнаиболее часто используется для элементаbody, чтобы выполнить сценарий сразу же после того как веб-страница полностью загрузится. - unload — событие происходит при выгрузке страницы (например, при закрытии вкладки (окна) браузера).
- pageshow — событие происходит, когда пользователь переходит на веб-страницу, т.е. после того как страница становится доступна пользователю. Событие
pageshowпохоже на событиеload, за исключением того, что оно срабатывает каждый раз при загрузке страницы, даже если она загружается из кэша. При первой загрузке страницы событиеpageshowсрабатывает сразу после событияload. - pagehide — событие происходит, когда пользователь уходит со страницы (событие
pagehideпроисходит до событияunload). Кроме этого данное событие, в отличие от событияunloadне препятствует кэшированию страницы. - resize — событие происходит при изменении размеров окна браузера.
- scroll — событие происходит, когда вы прокручиваете содержимое элемента, имеющего полосу прокрутки.
- focus — событие происходит, когда элемент получает фокус. Данное событие не всплывает.
- blur — событие происходит, когда объект теряет фокус. Данное событие не всплывает.
- focusin — событие происходит, когда элемент получает фокус. Событие
focusinподобно событиюfocus, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок? - focusout — событие происходит, когда элемент собирается потерять фокус. Событие
focusoutподобно событиюblur, но отличается от него тем, что оно всплывает. Поэтому его можно использовать, когда Вам необходимо выяснить, кто теряет фокус: элемент или его ребёнок? - change — событие происходит при изменении значения элемента, но уже после того как элемент потерял фокус. Кроме события
changeв JavaScript есть также похожее событиеinput, которое отличается от событияchangeтем, что происходит сразу же после изменения значения элемента. Событиесhangeв отличие от событияinputтакже работает с элементамиkeygenиselect. Для радиокнопок (radiobuttons) и флажков (checkboxes) событиеchangeпроисходит при изменении состояния этих элементов. - input — событие происходит после того как изменяется значение элемента
inputили элементаtextarea. - invalid — событие происходит, когда элемент
input, данные которого необходимо отправить вместе с другими данными формы на сервер, содержит недопустимые данные. - reset — событие происходит перед очисткой формы, которая осуществляется элементом
inputсtype="reset". - search — событие возникает после того как пользователь нажимает на клавишу Enter или нажимает кнопку «
x» (отмена) в элементеinputсtype="search". - select — событие происходит после того как Вы выбрали некоторый текст в элементе. Событие
selectв основном используется для элементаinputсtype="text"илиtextarea. - submit — событие происходит перед отправкой формы на сервер.
События, связанные с перетаскиваемым объектом (draggable target, исходный объект):
- dragstart – событие происходит, когда пользователь начал перетаскивать элемент;
- drag – событие происходит, когда пользователь перетаскивает элемент;
- dragend – событие происходит, когда пользователь закончил перетаскивания элемента, т.е. когда отпустил курсор мыши.
События, связанные с объектом (drop target), который принимает перетаскиваемый объект (draggable target):
- dragenter – событие происходит, когда перетаскиваемый объект (draggable target) вошёл в область элемента (drop target), который может принять перетаскиваемый объект (draggable target).
- ragleave – событие происходит, когда перетаскиваемый объект (draggable target) покидает пределы элемента (drop target), который может его принять.
- dragover — событие происходит, когда перетаскиваемый объект (draggable target) перемещается в области элемента (drop target), который может его принять.
- drop — событие происходит, когда пользователь отпускает перетаскиваемый объект (draggable target) в область элемента (drop target), который может его принять.
Три события, которые могут произойти, во время выполнения CSS анимации:
- animationstart — возникает, когда анимация CSS началась.
- animationiteration — возникает, когда анимация CSS выполняется повторно.
- animationend — возникает, когда CSS анимация закончилась.
- сopy — событие происходит, когда пользователь копирует содержимое элемента. Событие
copyтакже происходит, когда пользователь копирует элемент (например, изображения, созданные с помощью элементаimg). Событиеcopyиспользуется в основном для элементовinputсtype="text". - сut — событие происходит, когда пользователь вырезает содержимое элемента.
- paste — событие происходит, когда пользователь вставляет некоторое содержимое в элемент.
- afterprint — событие происходит, когда страница начинает печататься (т.е. после нажатия кнопки «Печать» в диалоговом окне) или если диалоговое окно «Печать» было закрыто.
- beforeprint — событие возникает перед печатью страницы, т.е. до открытия диалогового окна «Печать».
- transitionend — событие возникает, когда CSS-переход завершен. Примечание: если переход удален до завершения, (например, если свойство CSS
transition-propertyудалено), то событиеtransitionendне сработает.
- error — событие возникает при возникновении ошибки с источником события. Ошибка обычно возникает, когда связь нарушается. Если это произойдет, то объект
EventSourceбудет автоматически пытаться подключиться к серверу. - open — событие возникает, когда соединение с источником события открыто.
- message — событие возникает, когда сообщение получено через источник события.
Объектeventсобытияmessageподдерживает следующие свойства:data— содержит сообщение.origin— URL документа, который вызвал событие.lastEventId— идентификатор (id) последнего полученного сообщения.
В процессе загрузки аудио/видео события происходят в следующем порядке: loadstart -> durationchange -> loadedmetadata -> loadeddata -> progress -> canplay -> canplaythrough.
- abort — событие возникает, когда прерывается загрузка аудио/видео. Это событие возникает именно когда загрузка медиа данных была прервана (отменена), а не, потому что возникла ошибка.
- error — событие возникает, когда произошла ошибка при загрузке аудио/видео.
- stalled — событие возникает, когда браузер пытается получить медиа данные, но данные недоступны.
- suspend — событие возникает, когда браузер не может получить медиа данные, т.е. загрузка медиа останавливается по какой-то причине.
- loadstart — событие происходит, когда браузер начинает искать указанное аудио/видео, т.е. когда начинается процесс загрузки.
- durationchange — событие возникает, когда изменяется длительность аудио/видео. Если аудио/видео загружается, то длительность будет меняться от значения «NaN» до фактической длительности аудио/видео.
- loadedmetadata — событие возникает, когда метаданные для указанного аудио/видео загружены. Метаданные аудио/видео состоят из: длительности, размера (только видео) и текстовой дорожки.
- loadeddata — событие возникает, после того как первый кадр медиа загрузился.
- progress — событие происходит, когда браузер загружает указанное аудио/видео.
- canplay — событие возникает, когда браузер может начать воспроизведение указанного аудио/видео (т.е. когда буферизация потока аудио/видео достаточна для того чтобы браузер мог начать его воспроизводить).
- canplaythrough — событие возникает в тот момент времени, когда браузер может проигрывать указанное медиа без остановки на буферизацию.
- ended — событие происходит, когда воспроизведение аудио/видео завершилось (достигло конца). Это событие может использоваться для вывода сообщений типа «Спасибо за внимание», «Спасибо за просмотр» и др.
- pause — событие происходит, когда воспроизведение аудио/видео приостановлено пользователем или с помощью кода (программно).
- play — событие происходит, когда начинается воспроизведение аудио/видео. Оно также происходит, когда аудио/видео было снято с паузы и начинает воспроизводиться.
- playing — событие происходит, когда аудио/видео воспроизводится после того как оно было поставлено на паузу или остановилось для буферизации.
- ratechange — событие происходит, когда изменяется скорость воспроизведения аудио/видео.
- seeking — событие происходит, когда пользователь начинает перемещение ползунка (переход) к новой временной позиции проигрываемого аудио/видео.
- seeked — событие происходит, когда пользователь закончил перемещение ползунка (переход) в новую временную позицию проигрываемого аудио/видео. Событие
seekedпротивоположно событиюseeking. Для того чтобы получить текущую позицию воспроизведения, используйте свойствоcurrentTimeобъектаAudio/Video. - timeupdate — событие происходит при изменении временной позиции воспроизводимого аудио/видео.
Это событие происходит:- при воспроизведении потока аудио/видео.
- при перемещении ползунка в новую временную позицию воспроизводимого аудио/видео.
timeupdateчасто используется вместе со свойством объектаAudio/VideocurrentTime, которое возвращает текущую временную позицию воспроизводимого аудио/видео в секундах. - volumechange – событие происходит каждый раз при изменении громкости воспроизводимого потока видео/аудио.
Это событие происходит, при:- увеличении или уменьшении громкости;
- отключении или включении звука.
- waiting — событие происходит, когда видео останавливается для буферизации.
- toggle — событие происходит, когда пользователь открывает или закрывает элемент
details. Элементdetailsпредназначен для создания дополнительных сведений, которые пользователь при необходимости может просматривать или скрывать. - wheel — событие происходит при прокручивании колеса мыши вперёд или назад над элементом.
- Является ли событие «Нажатие клавиши на клавиатуре (
onkeypress)» сложным? И если является, то в результате, каких простых событий оно возникает? - Например, у Вас есть 2 элемента
ри пользователь перемещает мышку с области, принадлежащей одному элементур, на область, принадлежащую другому элементур. То, какие в этом случае возникают события, и какие элементы их генерируют?
JavaScript | Типы событий
333 157Веб-программирование — JavaScript — Типы событий
На заре развития Всемирной паутины веб-разработчикам приходилось иметь дело лишь с небольшим количеством событий: «load», «click», «mouseover» и другими. Эти довольно старые типы событий хорошо поддерживаются всеми браузерами. По мере развития веб-платформы в нее были включены более мощные прикладные интерфейсы, а количество событий существенно увеличилось. Не существует стандарта, который определял бы полный набор событий, и количество поддерживаемых событий продолжает быстро увеличиваться. Эти новые события определяются в следующих двух источниках:
Спецификация «DOM Level 3 Events», которая после долгих лет застоя стала активно разрабатываться под эгидой консорциума W3C.
Множество новых прикладных интерфейсов в спецификации HTML5 (и в связанных с ней дополнительных спецификациях) определяют новые события, используемые, например, для управления историей посещений, механизмом drag-and-drop (перетащил и бросил), обмена сообщениями между документами и проигрывания аудио- и видеороликов.
Обратите внимание, что многие из этих новых типов событий пока еще не получили широкой поддержки и определяются стандартами, которые еще находятся на стадии проектирования. События, которые вам чаще всего придется использовать в своих веб-приложениях, обычно будут относиться к категории давно существующих и поддерживаемых всеми браузерами: это события для работы с мышью, с клавиатурой, с HTML-формами и с объектом Window. Эти события мы и рассмотрим.
События загрузки документа
Большинству веб-приложений совершенно необходимо, чтобы веб-браузер извещал их о моменте, когда закончится загрузка документа и он будет готов для выполнения операций над ним. Этой цели служит событие load в объекте Window. Событие load возбуждается только после того, как документ и все его изображения будут полностью загружены. Однако обычно сценарии можно запускать сразу после синтаксического анализа документа, до того как будут загружены изображения. Можно существенно сократить время запуска веб-приложения, если начинать выполнение сценариев по событиям, отличным от load.
Событие DOMContentLoaded возбуждается, как только документ будет загружен, разобран синтаксическим анализатором, и будут выполнены все отложенные сценарии. К этому моменту изображения и сценарии с атрибутом async могут продолжать загружаться, но сам документ уже будет готов к выполнению операций. Это событие впервые было введено в Firefox и впоследствии заимствовано всеми другими производителями браузеров, включая корпорацию Microsoft, которая добавила поддержку этого события в IE9. Несмотря на приставку DOM в имени, это событие не является частью стандарта модели событий DOM Level 3 Events, но оно стандартизовано спецификацией HTML5.
В ходе загрузки документа изменяется значение свойства document.readyState. Каждое изменение значения этого свойства в IE сопровождается событием readystatechange в объекте Document, благодаря чему в IE это событие можно использовать для определения момента появления состояния complete. Спецификация HTML5 стандартизует событие readystatechange, но предписывает возбуждать его непосредственно перед событием load, поэтому не совсем понятно, в чем заключается преимущество события readystatechange перед load.
В примере ниже определяется функция whenReady(). Функция, передаваемая функции whenReady(), вызывается (как метод объекта Document) сразу, как только документ будет готов к выполнению операций. whenReady() ожидает появления событий DOMContentLoaded и readystatechange и использует событие load только как запасной вариант, на случай если она будет задействована в старых браузерах, не поддерживающих первые два события. Функция whenReady() будет использоваться в некоторых сценариях, следующих далее:
/* Передайте функции whenReady() свою функцию, и она вызовет ее (как метод
объекта документа), как только завершится синтаксический анализ документа
и он будет готов к выполнению операций. Зарегистрированные функции
вызываются при первом же событии DOMContentLoaded, readystatechange или load.
Как только документ станет готов и будут вызваны все функции,
whenReady() немедленно вызовет все функции, которые были ей переданы. */
var whenReady = (function() { // Эта функция возвращается функцией whenReady()
var funcs = []; // Функции, которые должны вызываться по событию
var ready = false; // Получит значение true при вызове функции handler
// Обработчик событий, который вызывается, как только документ
// будет готов к выполнению операций
function handler(e) {
// Если обработчик уже вызывался, просто вернуть управление
if (ready) return;
// Если это событие readystatechange и состояние получило значение,
// отличное от "complete", значит, документ пока не готов
if (e.type==="readystatechange" && document.readyState !== "complete") return;
// Вызвать все зарегистрированные функции.
// Обратите внимание, что здесь каждый раз проверяется значение
// свойства funcs.length, на случай если одна из вызванных функций
// зарегистрирует дополнительные функции.
for(var i = 0; i | Событие | Обработчик события | Поддерживающие HTML-элементы | Описание |
События мыши |
|||
| click | onClick | * Практически все HTML-элементы | Одинарный щелчок (нажата и отпущена кнопка мыши) |
| dblclick | onDblClick | * Практически все HTML-элементы | Двойной щелчок |
| contextmenu | onContextmenu | * Практически все HTML-элементы | Щелчок правой кнопкой мыши на элементе |
| selectstart | onselectstart | * Практически все HTML-элементы | Начало выделения контента. Изменение выделения скриптом. |
| mousewheel | onMousewheel | * Практически все HTML-элементы | Нажата кнопка мыши в пределах текущего элемента |
| mousemove | onMouseMove | * Практически все HTML-элементы | Перемещение курсора мыши в пределах текущего элемента |
| mouseout | onMouseOut | * Практически все HTML-элементы | Курсор мыши выведен за пределы текущего элемента |
| mouseover | onMouseOver | * Практически все HTML-элементы | Курсор мыши наведен на текущий элемент |
| mouseup | onMouseUp | * Практически все HTML-элементы | Отпущена кнопка мыши в пределах текущего элемента |
| mousedown | onMouseDown | * Практически все HTML-элементы | Нажата кнопка мыши в пределах текущего элемента |
События клавиатуры |
|||
| keydown | onKeyDown | * Практически все HTML-элементы | Нажата клавиша на клавиатуре |
| keypress | onKeyPress | * Практически все HTML-элементы | Нажата и отпущена клавиша на клавиатуре |
| keyup | onKeyUp | * Практически все HTML-элементы | Отпущена клавиша на клавиатуре |
|
|||
| focus | onFocus | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | Получение элементом фокуса (щелчок мышью на элементе или очередное нажатие клавиши табуляции) |
| blur | onBlur | A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA | Потеря текущим элементом фокуса, т.е. переход к другому элементу. Возникает при щелчке мышью вне элемента либо нажатии клавиши табуляции |
| change | onChange | INPUT, SELECT, TEXTAREA | Изменение значений элементов формы. Возникает после потерей элементом фокуса, т.е. после события blur |
| reset | onReset | FORM | Сброс данных формы ( щелчок по кнопке <input type=»reset»> ) |
| select | onSelect | INPUT, TEXTAREA | Выделение текста в текущем элементе |
| submit | onSubmit | FORM | Отправка данных формы ( щелчок по кнопке <input type=»submit»> ) |
| abort | onAbort | IMG, input type=»img» | Прерывание загрузки изображения |
|
|||
| load | onLoad | BODY, FRAMESET | Закончена загрузка документа |
| unload | onUnload | BODY, FRAMESET | Попытка закрытия окна браузера и выгрузки документа |
| error | onError | IMG, WINDOW | Возникновение ошибки выполнения сценария |
| move | onMove | WINDOW | Перемещение окна |
| resize | onResize | WINDOW | Изменение размеров окна |
| scroll | onScroll | * Практически все HTML-элементы | Прокрутка окна или области |
Виды событий в JavaScript | HTML+
События мыши
| Событие | Описание | Уровень DOM |
|---|---|---|
| onclick | Наступает при клике пользователя на элементе | 2 |
| oncontextmenu | Наступает, когда пользователь делает клик правой кнопкой мыши на элементе, чтобы открыть контекстное меню | 3 |
| ondblclick | Наступает при двойном клике пользователя на элементе | 2 |
| onmousedown | Наступает при нажатии левой кнопки мыши на элементе | 2 |
| onmouseup | Происходит, когда пользователь отпускает кнопку мыши над элементом | 2 |
| onmouseenter | Наступает, когда указатель мыши перемещается на элемент | 2 |
| onmouseleave | Событие происходит, когда указатель перемещается за пределы элемента | 2 |
| onmousemove | Происходит, когда указатель мыши двигается над элементом | 2 |
| onmouseover | Происходит, когда указатель мыши перемещается на элемент или на один из его дочерних элементов | 2 |
| onmouseout | Событие происходит, когда пользователь убирает указатель мыши с элемента или с одного из его дочерних элементов | 2 |
События клавиатуры
| Событие | Описание | Уровень DOM |
|---|---|---|
| onkeydown | Событие происходит, когда пользователь нажимает клавишу | 2 |
| onkeypress | Наступает, когда пользователь нажимает на клавишу, после события onkeydown, но до события onkeyup. Позволяет получить доступ только к символьным клавишам. | 2 |
| onkeyup | происходит, когда пользователь отпускает клавишу | 2 |
Примечание: Событие onkeypress не срабатывает для всех клавиш (например, клавиши Alt, Ctrl, Shift, Esc) во всех браузерах. Чтобы определить, нажал ли пользователь соответствующую клавишу, необходимо использовать событие onkeydown вместо onkeypress, поскольку оно работает для всех клавиш.
Также нужно учитывать, что обработка этого события поддерживается для всех HTML-тегов, кроме: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>
События окон/фреймов/объектов
| Событие | Описание | Уровень DOM |
|---|---|---|
| onabort | Наступает, когда загрузка ресурса была прервана | 2 |
| onbeforeunload | Происходит до того, как документ будет выгружен | 2 |
| onerror | Наступает, когда во время загрузки внешнего файла происходит ошибка (например, неверно указан путь к файлу изображения) | 2 |
| onhashchange | Событие происходит, когда произошли изменения в якорной части URL-адреса (http://somesite.com#about-us) | 3 |
| onload | Происходит, когда объект загрузился. Обрабатывается для таких html-элементов, как <body>, <frame>, <iframe>, <img>, <input type=»image»>, <link>, <script>, <style> | 2 |
| onunload | Событие происходит, когда страница выгружается (для элемента <body>) | 2 |
| onpageshow | Событие происходит, когда пользователь переходит на веб-страницу | 3 |
| onpagehide | Происходит, когда пользователь покидает веб-страницу | 3 |
| onresize | Происходит, когда размер видимой части документа изменяется (при изменении размеров окна браузера) | 2 |
| onscroll | Событие происходит, когда элемент прокручивается (для элементов, у которых задана высота и ширина и overflow: auto или scroll, а также для body, iframe, textarea) | 2 |
События форм и элементов форм
| Событие | Описание | Уровень DOM |
|---|---|---|
| onfocus | Наступает, когда элемент получает фокус, т.е. в него помещается курсор или выполнен переход клавишей Tab | 2 |
| onfocusin | Событие происходит, когда элемент собирается получить фокус. Похоже на событие onfocus, которое не всплывает. Поэтому, если вы хотите узнать, получает ли фокус элемент или его ребенок, вы должны использовать событие onfocusout.Не поддерживается в FireFox. | 2 |
| onfocusout | Происходит, когда элемент собирается терять фокус. Похоже на событие onblur, но onblur событие не всплывает. Поэтому, если вы хотите узнать, теряет ли фокус элемент или его ребенок, вы должны использовать событие onfocusout. Не поддерживается в FireFox. | 2 |
| onblur | Событие возникает, когда элемент теряет фокус, т.е. курсор покидает этот элемент. | 2 |
| onchange | Событие происходит, когда содержимое элемента формы, выделения или выбора изменяется (для элементов <input>, <select>, and <textarea>) | 2 |
| oninput | Событие происходит, когда происходит ввод текста в элемент | 3 |
| oninvalid | Происходит, когда элемент заполнен неверно | 3 |
| onreset | Событие происходит при сбросе формы (аналогично нажатию на кнопку типа reset) | 2 |
| onsearch | Событие происходит, когда пользователь набирает что-либо в поле поиска (для <input type=»search»>) | 3 |
| onselect | Наступает, когда пользователь выделяет текст (или его часть) в поле (для элементов <input> and <textarea>) | 2 |
| onsubmit | Событие возникает при отправке формы и должно обрабатываться для <form> | 2 |
События перетаскивания
| Событие | Описание | Уровень DOM |
|---|---|---|
| ondrag | Событие возникает, когда элемент перетаскивается | 3 |
| ondragstart | Событие возникает, когда пользователь начинает перетаскивать элемент | 3 |
| ondragend | Событие происходит, когда пользователь закончил перетаскивание элемента | 3 |
| ondragenter | Происходит, когда элемент перетаскивания входит в целевую точку другого элемента. | 3 |
| ondragleave | Событие происходит, когда элемент перетаскивания оставляет цель удаления. | 3 |
| ondragover | Событие происходит, когда элемент перетаскивания находится над целевой точкой | 3 |
| ondrop | Событие происходит, когда элемент перетаскивания удаляется по целевой точке | 3 |
Клик по событиям с ссылкой приведет вас на страницу со статьей-описанием именно этого события с различными примерами.
Для того чтобы события приводили к каким-то изменениям на html-странице, в JavaScript записываются обработчики событий в виде функций. Вы можете прочитать подробней об этом в статье «Обработка событий в JavaScript».
На основе статьи W3CScholls
Просмотров: 331