Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать на создании сайтов, лендингов, мобильных приложениях и новейших интернет технологиях

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

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

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

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

С уважением, Роман Чуешов


Прочитано: 181 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:
  • Денис

    Отличная статья. Мега полезная! Описанные возможности особенно mouseover крайне широко применяются серверами для нужд, которые пользователь хотел бы предотвратить. Сейчас мне многое стало понятно.

    03.01.2017 в 04:38
  • Денис

    Руслан, для уточнения спрошу, mouseover может передавать серверу информацию в каком месте страницы находится курсор, над какой ссылкой страницы он находится и как долго находится?

    03.01.2017 в 04:40
  • Денис

    Прикольные программы вы разместили, Руслан. Меня смайлы развеселили. Что это за сайт storage2. vsemayki, с которого смайлы грузятся. Получается, что не зная об этом, я загрузил на страницу изображения?

    03.01.2017 в 04:42
    • Денис

      Роман, прошу прощения. Опять назвал тебя в комментариях выше другим именем. Как будто переклинило меня.

      18.01.2017 в 12:58