Доброго времени суток, любознательные подписчики и гости блога. Сегодня мы разберем с вами полезный раздел в прототипно-ориентированном сценарном языке, а именно событие при наведении мыши 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 onmouseover="ChangeOver(this)" onmouseout="ChangeOut(this)" name="pic" src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley" width="300" height="300">
<h2>Наведите на изображение курсор мыши и оно изменится.</h2>
<h2>А теперь отведите его в сторону и понаблюдайте за изменениями</h2>
<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 id="pic" src="http://storage2.vsemayki.ru/images/0/0/514/514102/previews/sign_front_white_500.jpg" alt="Smiley" width="300" height="300">
<button onclick="Smile()">Нажмите на меня один раз и смайл улыбнется!</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> |
Как видите, все очень просто. Данные элементы легко вызывать в коде и привязывать их к определенным действиям.
На этой ноте я завершаю свой рассказ. Надеюсь вы почерпнули для себя что-то интересное, новое и полезное!
Если вы желаете и дальше читать мои статьи, а также узнавать о публикации новых, то подписывайтесь на обновления блога. И не забывайте делиться ссылками на понравившиеся темы с друзьями. До будущих встреч! Пока-пока!
С уважением, Роман Чуешов
Отличная статья. Мега полезная! Описанные возможности особенно mouseover крайне широко применяются серверами для нужд, которые пользователь хотел бы предотвратить. Сейчас мне многое стало понятно.
Руслан, для уточнения спрошу, mouseover может передавать серверу информацию в каком месте страницы находится курсор, над какой ссылкой страницы он находится и как долго находится?
Прикольные программы вы разместили, Руслан. Меня смайлы развеселили. Что это за сайт storage2. vsemayki, с которого смайлы грузятся. Получается, что не зная об этом, я загрузил на страницу изображения?
Роман, прошу прощения. Опять назвал тебя в комментариях выше другим именем. Как будто переклинило меня.
Бывает.))
Роман, добрый день.
Я не программист, но у меня вопрос по вашей теме о Javascript.
Я пользуюсь сервисом Trello, который работает в окне браузера. У сервиса есть стороннее дополнение на Javascript, которое запускается во всплывающем окне, но не браузера, а внутри самого сервиса.
При наведении мыши на содержимое окна дополнения, например, на график, всплывают блоки с различными функциями. При клике правой кнопкой мыши появляется меню сервиса.
Я поменял ноутбук. После этого я могу только просматривать содержимое всплывающего окна на Javascript, но при наведении мыши блоки с функциями уже не всплывают, а при клике правой кнопкой появляется меню, но не самого сервиса, а управления фреймом. Функция запускать JS в браузере включена.
Какие ещё параметры и как мне нужно настроить, чтобы это дополнение работало корректно?
PS: Win10pro.
Заранее благодарю за ответ.