События мыши

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

$(":button").click(function() {
   alert("Вы нажали на кнопку");
});
toggle(<Функция обратного вызова 1>,
   <Функция обратного вызова 2>[,
   ...,
   <Функция обратного вызова N>])

Сделаем цвет текста абзаца меняющимся после каждого щелчка мыши.

$("p").toggle(
   function() {
      $(this).css("color", "red");
   },
   function() {
      $(this).css("color", "blue");
   },
   function() {
      $(this).css("color", "green");
   }
).click();

Попробуйте щелкнуть несколько раз на абзаце. Цвет текста будет последовательно меняться с красного на синий, с синего — на зеленый, с зеленого — опять на красный. Обратите внимание на последнюю строку примера. После назначения обработчика события вызывается событие onclick с помощью метода click() без параметров. По этой причине с самого начала цвет абзаца будет красным.

$("p").dblclick(function() {
   alert("Вы сделали двойной щелчок");
});
$("p").mousedown(function() {
   $("#div1").append("Событие onmousedown" + "<br>");
}).mouseup(function() {
   $("#div1").append("Событие onmouseup" + "<br>");
});

<p>Щелкни здесь</p>
<div id="div1"></div>
$("p").mousemove(function() {
   $("#div1").append("Событие onmousemove" + "<br>");
});
$("a").mouseover(function() {
   $(this).css("color", "red");
   $("#div1").append("Событие onmouseover" + "<br>");
}).mouseout(function() {
   $(this).css("color", "black");
   $("#div1").append("Событие onmouseout" + "<br>");
});
hover(<Функция обратного вызова для события onmouseover>,
      <Функция обратного вызова для события onmouseout>)

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

$("a").hover(function() {
   $(this).css("color", "red");
   $("#div1").append("Событие onmouseover" + "<br>");
}, function() {
   $(this).css("color", "black");
   $("#div1").append("Событие onmouseout" + "<br>");
});

Использование метода hover() имеет еще одно преимущество. Если внутри блока существует другой блок, то отдельные функции будут вызываться при входе во внутренний блок, а также при выходе из него. При использовании метода hover() эти перемещения будут игнорироваться (листинг 6.2).

Листинг 6.2. Особенности использования метода hover()

<!doctype html>
<html>
<head>
<title>Особенности использования метода hover()</title>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<script>
$(document).ready(function() {
   $("#div1").mouseover(function() {
      $("#log1").append("Событие onmouseover<br>");
   });
   $("#div1").mouseout(function() {
      $("#log1").append("Событие onmouseout<br>");
   });
   $("#div2").hover(
      function() {
         $("#log2").append("Событие onmouseover<br>");
      },
      function() {
         $("#log2").append("Событие onmouseout<br>");
      }
   );
});
</script>
<style>
.cls1 {
   border:2px solid black; background-color:green; padding:30px;
}
.cls2 {
   border:2px solid black; background-color:silver;
}
</style>
</head>
<body>
<b>Отдельные обработчики:</b><br>
<div class="cls1" id="div1">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>Функция hover():</b><br>
<div class="cls1" id="div2">
<div class="cls2">
Строка 1<br>
Строка 2
</div>
</div>
<div id="log2"></div>
</body>
</html>

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

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

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

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

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

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

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

$("p, div").click(function(e) {
   $("#div1")
      .append("Элемент " + e.srcElement.tagName + "<br>");
});
Предыдущая статья Все статьи Следующая статья