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

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

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

• «onmouseover» — срабатывает при заходе курсора на элемент;
• «onmouseout» — срабатывает при уходе курсора с элемента.

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

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

 #ShowHide1 < cursor: pointer; >#exemple1  Скрыть/показать блок 
БЛОК
 

Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.

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

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

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

  Скрыть/показать блок 
БЛОК
 

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

$(function () < $("#ShowHide1").mouseover(function()< //действия >); $("#ShowHide1").mouseout(function()< //действия >); >);

Источник

Element: mouseover event

The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.

Syntax

Use the event name in methods like addEventListener() , or set an event handler property.

addEventListener("mouseover", (event) => >); onmouseover = (event) => >; 

Event type

Event properties

This interface also inherits properties of its parents, UIEvent and Event . MouseEvent.altKey Read only Returns true if the alt key was down when the mouse event was fired. MouseEvent.button Read only The button number that was pressed (if applicable) when the mouse event was fired. MouseEvent.buttons Read only The buttons being pressed (if any) when the mouse event was fired. MouseEvent.clientX Read only The X coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.clientY Read only The Y coordinate of the mouse pointer in local (DOM content) coordinates. MouseEvent.ctrlKey Read only Returns true if the control key was down when the mouse event was fired. MouseEvent.layerX Non-standard Read only Returns the horizontal coordinate of the event relative to the current layer. MouseEvent.layerY Non-standard Read only Returns the vertical coordinate of the event relative to the current layer. MouseEvent.metaKey Read only Returns true if the meta key was down when the mouse event was fired. MouseEvent.movementX Read only The X coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.movementY Read only The Y coordinate of the mouse pointer relative to the position of the last mousemove event. MouseEvent.offsetX Read only The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.offsetY Read only The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. MouseEvent.pageX Read only The X coordinate of the mouse pointer relative to the whole document. MouseEvent.pageY Read only The Y coordinate of the mouse pointer relative to the whole document. MouseEvent.relatedTarget Read only The secondary target for the event, if there is one. MouseEvent.screenX Read only The X coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.screenY Read only The Y coordinate of the mouse pointer in global (screen) coordinates. MouseEvent.shiftKey Read only Returns true if the shift key was down when the mouse event was fired. MouseEvent.mozInputSource Non-standard Read only The type of device that generated the event (one of the MOZ_SOURCE_* constants). This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). MouseEvent.webkitForce Non-standard Read only The amount of pressure applied when clicking. MouseEvent.x Read only Alias for MouseEvent.clientX . MouseEvent.y Read only Alias for MouseEvent.clientY .

Examples

HTML

ul id="test"> li>item 1li> li>item 2li> li>item 3li> ul> 

JavaScript

const test = document.getElementById("test"); // This handler will be executed only once when the cursor // moves over the unordered list test.addEventListener( "mouseenter", (event) =>  // highlight the mouseenter target event.target.style.color = "purple"; // reset the color after a short delay setTimeout(() =>  event.target.style.color = ""; >, 500); >, false, ); // This handler will be executed every time the cursor // is moved over a different list item test.addEventListener( "mouseover", (event) =>  // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay setTimeout(() =>  event.target.style.color = ""; >, 500); >, false, ); 

Result

Specifications

Источник

Создаем собственные события при наведении мыши с помощью 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

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

Наведите на изображение курсор мыши и оно изменится.

А теперь отведите его в сторону и понаблюдайте за изменениями

Пришло время группировки

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

Почему же так? Ответ достаточно прост.

Обработка событий происходит с какой-то максимально допустимой скоростью. И при этом не стоит забывать, что события обрабатываются по очереди. А значит при слишком быстром нажатии на разные элементы цепочка обработки может не выполниться полностью.

Как вы уже поняли, комплексные события несколько упрощают жизнь разработчиков, включая в себя сразу набор необходимых простых 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

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

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

Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.

На этой ноте я завершаю свой рассказ. Надеюсь вы почерпнули для себя что-то интересное, новое и полезное!

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

Источник

mouseover

Реагируем, когда пользователь наводит курсор на элемент.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

Событие на HTML-элементе. Происходит, когда пользователь передвигает курсор на сам элемент или на вложенные элементы.

На события можно подписаться и выполнять JavaScript-код, когда событие произошло.

Событие является противоположным событию mouseout . Эти события часто используются в паре.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

 const divEl = document.getElementsByTagName('div')[0]divEl.addEventListener('mouseover', function ()  alert('курсор вошел в границы элемента!')>) const divEl = document.getElementsByTagName('div')[0] divEl.addEventListener('mouseover', function ()  alert('курсор вошел в границы элемента!') >)    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Подробнее о механизме событий читай в статье «События».

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

 let current = undefined function onMouseover()  if (current)  current.classList.remove('mouseover') > this.classList.add('mouseover') current = this // Записываем текущий пункт, // чтобы удалить с него класс // при переходе курсора на новый элемент> const items = document.getElementsByTagName('li')for (let i = 0; i < items.length; ++i)  const item = items[i] item.addEventListener('mouseover', onMouseover)> let current = undefined function onMouseover()  if (current)  current.classList.remove('mouseover') > this.classList.add('mouseover') current = this // Записываем текущий пункт, // чтобы удалить с него класс // при переходе курсора на новый элемент > const items = document.getElementsByTagName('li') for (let i = 0; i  items.length; ++i)  const item = items[i] item.addEventListener('mouseover', onMouseover) >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Николай Лопин советует

Скопировать ссылку «Николай Лопин советует» Скопировано

🛠 С помощью пары событий mouseover и mouseout можно делать выпадающие списки и меню. Но у таких меню могут быть проблемы с доступностью.

🛠 Есть очень похожее событие mouseenter , но оно не всплывает. Вместо этого для каждого элемента в цепочке вложенности (с самого вложенного элемента, на котором произошло событие до ) создаётся собственное событие. Если у вас глубокое DOM-дерево, то таких событий может быть много. Это может привести к проблемам с производительностью.

Источник