Версия для печати. Взято с сайта phpsql.ru

На главную   Назад   Вперед

События мыши

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

• click ( [Функция обратного вызова] ) — выполняется при щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитиро-вать щелчок на элементе. Событию onclick предшествуют два события: оnmousedown и onmouseup. Выведем сообщение после щелчка на любой кнопке.
$ ("ibutton") .click(function() {
alert("Вы нажали на кнопку");
});

• toggle () — позволяет чередовать несколько функций при щелчке на элементе или веб-странице. Функции вызываются по очереди. При первом щелчке вызыва-ется первая функция, при втором — вторая, при третьем — третья. Если третья функция не определена, то вызывается опять первая функция, и т.д. Метод tog-gle () имеет следующий формат.
toggle(<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Сделаем цвет текста абзаца меняющимся после каждого щелчка мыши.
$("р").toggle
( function() {
$(this).css("color", "red");
function() {
$(this).css("color", "blue");
function() {
$(this).css("color", "green");
}
) .click();

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

• dblclick( [Функция обратного вызова] ) — выполняется при двойном щелчке на элементе или веб-странице. Если параметр не указан, то это позволит имитировать двойной щелчок на элементе. Событию ondblclick предшествуют три события: onmousedown, onmouseup и onclick. Выведем сообщение при двойном щелчке на любом абзаце.
$("р").dblclick(function() {
alert("Вы сделали двойной щелчок");
});

mousedown (Функция обратного вызова) — выполняется при нажатии кнопки мыши на элементе или странице. Событие onmousedown возникает перед событиями onmouseup и onclick.

mouseup (Функция обратного вызова) — выполняется при отпускании ранее нажатой кнопки мыши. Событие onmouseup возникает между событиями onmousedown и onclick. Выведем сообщения при нажатии и отпускании кноп-ки мыши над абзацем.

$("р").mousedown(function()   {
$("#divl").append("Событие onmousedown" + "<br>"); 
}).mouseup(function()   {
$("#divl").append("Событие onmouseup" + "<br>");
});
<р>Щелкни меня</р> 
<div id="divl"></div>

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

$( "р") .mousemove(function()   {
$("#divl").append("Событие onmousemove" + "<br>");
});

mouseover (Функция обратного вызова) — выполняется при наведении курсора мыши на элемент.

mouseout (Функция обратного вызова) — выполняется при выходе кур-сора мыши за пределы элемента. При наведении курсора на ссылку сделаем цвет ссылки красным и выведем сообщение, а при уходе курсора со ссылки — изме-ним ее цвет на черный и выведем сообщение.

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

• hover () — позволяет обработать наведение и уход курсора с элемента с помо-щью одного метода. Имеет следующий формат.
hover(Функция обратного вызова для события onmouseover, Функция обратного вызова для события onmouseout)

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

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

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

<html>
<head>
<title>Особенности использования метода hover()</title>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8">
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(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. Напишем обра-ботчик щелчка мыши для двух элементов сразу. При нажатии выведем название тега в элементе с идентификатором divl.

$("р, div").click(function(е)   { 
       $("#divl")
.append("Элемент " + e.srcElement.tagName + "<br>");
});

 
Предыдущая   На главную   Следующая