Методы обработки событий мыши

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

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


$ (":button").click(function() {
alert("Вы нажали на кнопку");
});

•    toggle () — позволяет чередовать несколько функций при щелчке на элементе
или веб-странице. Функции вызываются по очереди. При первом щелчке вызывается первая функция, при втором — вторая, при третьем — третья. Если третья функция не определена, то вызывается опять первая функция, и т.д. Метод toggle () имеет следующий формат.

toggle(<Функция  обратного  вызова  1>,
<Функция  обратного  вызова  2>[,
...,
/ <Функция  обратного  вызова N>] )

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

$("р").toggle(
function()    {
$(this).сss("color",   "red");
},
function()   {
$(this).сss("color",   "blue");
},
function()    {
$(this).сss("color",   "green");
}
).click();

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

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

$("р").dblclick(function() {
alert("Вы сделали двойной щелчок");
});

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

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

$("р").mousedown(function() {
$("#div1").append("Событие onmousedown" + "<br>");
}).mouseup(function() {
$("#div1").append("Событие onmouseup" + "<br>");
});

<р>Щелкни меня</р>
<div id="div1"></div>

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

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

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

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

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

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

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

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

Листинг 6.2. Особенности использования метода hover()
<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 id="div1">
<div>
Строка 1<br>
Строка 2
</div>
</div>
<div id="log1"></div>
<b>Функция hover():</b><br>
<div id="div2">
<div>
Строка 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.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *