События мыши

Для обработки событий мыши в jQuery предназначены следующие методы:

• click([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при щелчке на элементе или Web-странице. Если параметры не указаны, то будут вызваны обработчики. Событию onclick предшествуют два события: onmousedown и onmouseup. Выведем сообщение после щелчка на кнопке с идентификатором btn1:

<button type="button" class="btn btn-primary" id="btn1">
    Нажми меня</button>

$('#btn1').click( function() {
   console.log('Вы нажали кнопку');
});

• dblclick([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при двойном щелчке на элементе или Web-странице. Если параметры не указаны, то будут вызваны обработчики. Событию ondblclick предшествуют три события: onmousedown, onmouseup и onclick. Выведем сообщение в консоль при двойном щелчке на любом абзаце:

$('p').dblclick( function() {
   console.log('Вы сделали двойной щелчок');
});

• mousedown([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при нажатии кнопки мыши на элементе или на странице. Событие onmousedown возникает перед событиями onmouseup и onclick;
• mouseup([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при отпускании ранее нажатой кнопки мыши. Событие onmouseup возникает между событиями onmousedown и onclick. Выведем сообщения при нажатии и отпускании кнопки мыши над абзацем:

<p>Щелкните здесь</p>
<div id="log"></div>

$('p').mousedown( function() {
   $('#log').append('Событие onmousedown<br>');
}).mouseup( function() {
   $('#log').append('Событие onmouseup<br>');
});

• mousemove([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при любом перемещении мыши. Выведем сообщение при перемещении курсора над абзацем:

$('p').mousemove( function() {
   $('#log').append('Событие onmousemove<br>');
});

• mouseover([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при наведении курсора мыши на элемент. Внутри обработчика через объект события доступно свойство relatedTarget, содержащее ссылку на предыдущий элемент;
• mouseout([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при выходе курсора мыши за пределы элемента. Внутри обработчика через объект события доступно свойство relatedTarget, содержащее ссылку на следующий элемент. При наведении курсора на ссылку, сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки — изменим ее цвет на черный и выведем сообщение:

<a href="#">Текст ссылки</a>
<div id="log"></div>

$('a').mouseover( function() {
   $(this).css('color', 'red');
   $('#log').append('Событие onmouseover<br>');
}).mouseout( function() {
   $(this).css('color', 'black');
   $('#log').append('Событие onmouseout<br>');
});

• mouseenter([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при наведении курсора мыши на элемент;
• mouseleave([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при выходе курсора мыши за пределы элемента. Переделаем наш предыдущий пример и используем методы mouseenter() и mouseleave():

$('a').mouseenter( function() {
   $(this).css('color', 'red');
   $('#log').append('Событие mouseenter<br>');
}).mouseleave( function() {
   $(this).css('color', 'black');
   $('#log').append('Событие mouseleave<br>');
});

• hover() — позволяет обработать наведение и уход курсора с помощью одного метода. Имеет следующие форматы:

hover(<Функция обратного вызова для события mouseenter>, 
      <Функция обратного вызова для события mouseleave>)
hover(<Функция обратного вызова для событий mouseenter 
      и mouseleave>)

Переделаем наш предыдущий пример и используем метод hover():

$('a').hover(
   function() {
      $(this).css('color', 'red');
      $('#log').append('Событие mouseenter<br>');
   },
   function() {
      $(this).css('color', 'black');
      $('#log').append('Событие mouseleave<br>');
   }
);

• contextmenu([[<Данные>, ]<Функция обратного вызова>]) — функция обратного вызова выполняется при щелчке правой кнопкой мыши, приводящем к отображению контекстного меню. Выведем сообщение в консоль при отображении контекстного меню на любом абзаце:

<p>Текст</p>

$('p').contextmenu( function() {
   console.log('Отображение контекстного меню');
});

Использование методов mouseenter(), mouseleave() и hover() отличается от обработки событий onmouseover и onmouseout с помощью методов mouseover() и mouseout(). Если внутри блока существует другой блок, то событие onmouseover будет вызываться при входе во внутренний блок, а событие onmouseout — при выходе из него. При использовании событий mouseenter и mouseleave эти перемещения будут игнорироваться (листинг 1.12).

Листинг 1.12. События mouseenter и mouseleave

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <title>События mouseenter и mouseleave</title>
   <style>
   .cls1 {
      border: 2px solid black;
      background-color: green;
      padding: 30px;
   }
   .cls2 {
      border: 2px solid black;
      background-color: silver;
   }
   </style>
</head>
<body>
   <p><b>Методы mouseover() и mouseout():</b></p>
   <div class="cls1" id="div1">
      <div class="cls2">
         Строка 1<br>
         Строка 2
      </div>
   </div>
   <div id="log1"></div>
   
   <p><b>Методы mouseenter() и mouseleave():</b></p>
   <div class="cls1" id="div2">
      <div class="cls2">
         Строка 1<br>
         Строка 2
      </div>
   </div>
   <div id="log2"></div>
   
   <p><b>Метод hover():</b></p>
   <div class="cls1" id="div3">
      <div class="cls2">
         Строка 1<br>
         Строка 2
      </div>
   </div>
   <div id="log3"></div>
   
<script src="js/jquery.min.js"></script>
<script>
$(function() {
   $('#div1').mouseover( function() {
      $('#log1').append('Событие onmouseover<br>');
   });
   $('#div1').mouseout( function() {
      $('#log1').append('Событие onmouseout<br>');
   });
   
   $('#div2').mouseenter( function() {
      $('#log2').append('Событие mouseenter<br>');
   });
   $('#div2').mouseleave( function() {
      $('#log2').append('Событие mouseleave<br>');
   });
   
   $('#div3').hover(
      function() {
         $('#log3').append('Событие mouseenter (hover())<br>');
      },
      function() {
         $('#log3').append('Событие mouseleave (hover())<br>');
      }
   );
});
</script>
</body>
</html>

Для блока с идентификатором div1 мы определили обработчики событий с помощью методов mouseover() и mouseout(). Если переместить курсор мыши через весь блок посередине, получим следующую последовательность событий:

Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout
Событие onmouseover
Событие onmouseout

Для блока с идентификатором div2 обработчики событий назначены с помощью методов mouseenter() и mouseleave(). При том же самом действии мы получим только два события:

Событие mouseenter
Событие mouseleave

Для блока с идентификатором div3 обработчики событий назначены с помощью метода hover(). При том же самом действии мы получим только два события:

Событие mouseenter (hover())
Событие mouseleave (hover())

Во всех приведенных в этом разделе методах мы еще не разобрались с параметрами, которые можно им передать. В качестве параметра <Функция обратного вызова> указывается ссылка на функцию следующего формата:

function <Название функции>([<Объект event>]) {
   // ...
}

Элемент, в котором обрабатывается событие, доступен внутри функции через указатель this. Обратите внимание на то, что указатель this ссылается на элемент объектной модели документа, а не на элемент коллекции jQuery. Если в параметре <Объект event> указана переменная, то через нее можно обратиться к свойствам объекта event. Напишем обработчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором log:

<p>Текст</p>
<div>Текст</div>
<div id="log"></div>

$('p, div').click( function(e) {
   $('#log')
      .append('Элемент ' + e.target.tagName + '<br>');
});

Учебник по jQuery и AJAX в формате PDF