При наведении курсора мыши на кнопку должно выдаваться некоторое сообщение

Обновлено: 05.07.2024

Ранее в скриптах мы с вами часто использовали событие click – щелчок левой кнопкой мыши. В действительности – это составное событие, то есть, мы сначала нажимаем левую кнопку, затем отпускаем и только потом генерируется событие click. Причем в момент нажатия и отпускания кнопки возникают свои события:

mousedown/mouseup – нажатие и отпускание кнопки мыши.

Давайте в этом убедимся, возьмем вот такой HTML-документ:

В нем прописаны три обработчика на события click, mousedown и mouseup. Теперь кликнем по документу и в консоли увидим эти три события в порядке:

mousedown → mouseup → click

И это стандартизированный порядок: данные события возникают именно в такой последовательности. Для двойного клика тоже есть свое событие dblclick. Добавим его:

Теперь при двойном щелчке левой кнопкой мыши, мы видим такие события:

mousedown → mouseup → click → mousedown → mouseup → click → dblclick

Эта последовательность также стандартизирована и события следуют друг за другом именно в таком порядке.

event.which == 1 – левая кнопка;
event.which == 2 – средняя кнопка;
event.which == 3 – правая кнопка.

Теперь мы знаем какая кнопка мыши была нажата при возникновении данных событий.

event.shiftKey – true, если нажата клавиша Shift и false в противном случае;
event.altKey – true при нажатом Alt (или Opt для Mac) и false иначе;
event.ctrlKey – true при нажатом Ctrl и false иначе;
event.metaKey – true при нажатом Cmd (для Mac) и false иначе.

Обрабатывать их достаточно просто, например так:

Обратите внимание, когда мы пишем браузерные скрипты, то предполагаем, что они могут быть запущены на самых разных компьютерах с разными ОС, в том числе и Mac OS. Так вот, в ОС Mac пользователи вместо клавиши Ctrl нажимают на клавишу Cmd. И это следует учесть в скрипте, например, так:

Здесь мы проверяем не только Ctrl, но и свойство metaKey, отвечающее за нажатие на кнопку Cmd.

Также не нужно забывать и про пользователей мобильных устройств с отсутствующей клавиатурой. Так что они вряд ли смогут перемещать курсор мыши с нажатой клавишей Shift!

clientX/clientY – координаты курсора мыши относительно окна браузера;
pageX/pageY – координаты курсора мыши относительно HTML-документа.

Например, для события mousemove будем выводить координаты курсора мыши в консоль:

Аналогично работают свойства pageX/pageY.

mouseover – возникает при наведении курсора мыши на элемент HTML-документа;
mouseout – возникает при покидании курсора мыши элемента HTML-документа.

Например, у нас есть вот такое содержимое страницы:

И добавим обработчик события mouseover:

target – ссылка на объект над которым находится курсор мыши;
relatedTarget – ссылка на объект, с которого ушел курсор мыши.

Давайте посмотрим, как это все будет работать. Объясняем.

relatedTarget – ссылка на объект над которым находится курсор мыши;
target – ссылка на объект, с которого ушел курсор мыши.

Изменим в обработчике событие на mouseout и обновим документ. Видите, эти свойства работают именно так, что логично, так как событие mouseout возникает при покидании элемента, значит target будет тем элементом, с которого мы ушли, а relatedTarget – элементом где мы сейчас находимся.

События mouseover и mouseout всплывают от целевого элемента, где они произошли и доходят до корня DOM-дерева – объекта document. Например, если повесить событие mouseover на тег div:

То при наведении курсора на дочерний элемент p, увидим событие mouseover. Причем при переходе с дочернего элемента и обратно также генерируется это событие.

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

mouseenter и mouseleave

Не всплывают.
Событие mouseenter генерируется когда указатель оказывается над элементом и при этом не важно: потомок это элемента или сам элемент.
Событие mouseleave срабатывает при покидании элемента целиком (дочерние элементы здесь не учитываются).

Например, заменим событие mouseover на mouseenter, получим. Смотрите, теперь при переходе между дочерним элементом и div дополнительных событий не возникает. Аналогично работает и mouseleave.

Из-за того, что события mouseenter и mouseleave не всплывают, они не могут быть делегированы обработчику верхнего уровня, например, для объекта document:

так работать не будет. Но, если прописать событие

то мы его успешно перехватываем. Вот эти ограничения следует учитывать при использовании событий mouseenter и mouseleave.

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.

Самое простое, это создать эти события внутри тега:

При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:

События onmouseover и onmouseout в jQuery

Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.

не забудьте про CSS стили

Скрипт сократился за счет того, что одну функцию вешаем на оба события сразу. Так же, для вызова событий можно воспользоваться следующей конструкцией:

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

События mouseover/mouseout, relatedTarget

Событие mouseover происходит в момент, когда курсор оказывается над элементом, а событие mouseout – в момент, когда курсор уходит с элемента.

Для события mouseover :

event.target – это элемент, на который курсор перешёл.
event.relatedTarget – это элемент, с которого курсор ушёл ( relatedTarget → target ).

Для события mouseout наоборот:

event.target – это элемент, с которого курсор ушёл.
event.relatedTarget – это элемент, на который курсор перешёл ( target → relatedTarget ).

В примере ниже каждое лицо и его черты – отдельные элементы. При движении указателя по этим элементам в текстовом поле отображаются происходящие события.

Каждое из них содержит информацию о target и relatedTarget :

Свойство relatedTarget может быть null .

Это нормально и означает, что указатель мыши перешёл не с другого элемента, а из-за пределов окна браузера. Или же, наоборот, ушёл за пределы окна.

Следует держать в уме такую возможность при использовании event.relatedTarget в своём коде. Если, например, написать event.relatedTarget.tagName , то при отсутствии event.relatedTarget будет ошибка.

Пропуск элементов

Событие mousemove происходит при движении мыши. Однако, это не означает, что указанное событие генерируется при прохождении каждого пикселя.

Браузер периодически проверяет позицию курсора и, заметив изменения, генерирует события mousemove .

Это означает, что если пользователь двигает мышкой очень быстро, то некоторые DOM-элементы могут быть пропущены:

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

В его HTML есть два элемента,

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

Также попробуйте поставить курсор на внутренний элемент, а затем очень быстро сделайте движение мышкой вниз через внешний элемент. Если у вас получится достаточно быстро, то на родительском элементе не будет сгенерировано никаких событий. То есть, мышь пройдёт через внешний элемент, не замечая его.

Несмотря на то, что при быстрых переходах промежуточные элементы могут игнорироваться, в одном мы можем быть уверены: элемент может быть пропущен только целиком.

Событие mouseout при переходе на потомка

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

То есть, визуально указатель всё ещё на элементе, но мы получим mouseout !

Это выглядит странно, но легко объясняется.

По логике браузера, курсор мыши может быть только над одним элементом в любой момент времени – над самым глубоко вложенным и верхним по z-index.

Таким образом, если курсор переходит на другой элемент (пусть даже дочерний), то он покидает предыдущий.

Обратите внимание на важную деталь.

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

Вы можете наглядно увидеть это в примере ниже:

. На родителе определены обработчики событий mouseover/out , которые выводят информацию о них в текстовое поле.

При переходе мышью с внешнего элемента на внутренний, вы увидите сразу два события: mouseout [target: parent] (ушли с родителя) и mouseover [target: child] (перешли на потомка, событие всплыло).

При переходе с родителя элемента на потомка – на родителе сработают два обработчика: и mouseout и mouseover :

Если код внутри обработчиков не смотрит на target , то он подумает, что мышь ушла с элемента parent и вернулась на него обратно. Но это не так! Мышь никуда не уходила, она просто перешла на потомка.

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

Чтобы этого избежать, можно смотреть на relatedTarget и, если мышь всё ещё внутри элемента, то игнорировать такие события.

Или же можно использовать другие события: mouseenter и mouseleave , которые мы сейчас изучим, с ними такая проблема не возникает.

События mouseenter и mouseleave

События mouseenter/mouseleave похожи на mouseover/mouseout . Они тоже генерируются, когда курсор мыши переходит на элемент или покидает его.

Но есть и пара важных отличий:

Переходы внутри элемента, на его потомки и с них, не считаются.
События mouseenter/mouseleave не всплывают.

События mouseenter/mouseleave предельно просты и понятны.

Когда указатель появляется над элементом – генерируется mouseenter , причём не имеет значения, где именно указатель: на самом элементе или на его потомке.

Событие mouseleave происходит, когда курсор покидает элемент.

Вот тот же пример, что и выше, но на этот раз на верхнем элементе стоят обработчики mouseenter/mouseleave вместо mouseover/mouseout .

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

2. с командой onMouseOut
При наведении курсора мыши на картинку изображение должно меняться на другое, а когда курсор покинет область картинки, должно восстанавливаться прежнее изображение .
Заранее спасибо

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

Изображение должно меняться при наведении
Здравствуйте, прошу вас помочь сделать так чтобы при наведении на изображение, допустим на Image1.

При нажатие на динамическое изображение оно должно меняться на другое
Доброе время суток ! У меня возникла такая проблема: не могу с своем скрипте реализовать функцию.

Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши JavaScript.

Я хочу, чтобы вы хорошенько разобрались в таких событиях, как click, mouseup, mousedown, mouseover и других, поняли разницу между ними и научились их использовать для решения поставленных задач. Конечно же после каждого ключевого теоретического материала вы сможете найти программную реализацию примеров. Ну что ж, приступим!

Все сведенья о событиях мышки

Для мыши существует несколько событий, которые полностью охватывают всевозможные действия курсора на странице веб-приложения. Среди них есть те, которые срабатывают при нажатии на объект, наведении на него или движении указателя по открытому окну. Их все можно поделить на две группы: простые и комплексные (составные) события.

Начнем с простого

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

Наименование	Описание
mousedown	Названный event вызывается, когда одна из кнопок мышки нажата, но пока еще не отпущена.
mouseup	А этот срабатывает уже при отпускании зажатой ранее кнопочки.
mouseover	Вызывается при наведении курсора на обрабатываемый объект.
mouseout	Обрабатывает действие выхода курсора из области элемента.
mousemove	Любое движение указателя над определенной областью вызывает текущее событие.

Ну а теперь для закрепления материала разберем пример. Я создал небольшую программку, в которой изменяются эмоции смайла при наведении и отведении курсора.

Пример наведения указателя на элемент страницы

Читайте также: