Использование прямых методов для работы с событиями мыши 

ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Использование прямых методов для работы с событиями мыши

В библиотеке jQuery существуют функции, эквивалентные большинству событий объектной модели документа (DOM). Чтобы присвоить событие элементу, нужно просто добавить точку, имя события и пару круглых скобок. Если мы хотим добавить событие наведения указателя мыши к каждой ссылке странице, то сделать это можно следующим образом:

$("a").mouseover();
Обработчики событий mouseover() и mouseout()

Обработчик событий mouseover() привязывает или вызывает функцию, код которой будет выполнен, когда на выбранный элемент будет наведен указатель мыши.

Обработчик события mouseover часто используется совместно с mouseout и имеет следующий синтаксис:

//Вызываем событие:
$(селектор).mouseover()
//Привязываем обработчик:
$(селектор).mouseover(обработчик_события)

Обработчик событий mouseout() привязывает или вызывает функцию, код которой будет выполнен, когда указатель мыши будет выведен из границ выбранного элемента и имеет следующий синтаксис:

//Вызываем событие:
$(селектор).mouseout()
//Привязываем обработчик:
$(селектор).mouseout(обработчик_события)

Обратимся к нашему примеру.

Наведем указатель мыши на элементы имеющие класс .foo. Мы увидим как меняется цвет и размер текста. Как только указатель выходит за их пределы, все возвращается назад. При наведении указателя мыши на кнопку button1, она меняет название на "Кликни меня". Щелчок мыши на кнопке скрывает форму. При выводе указателя мыши за пределы кнопки, форма появляется вновь.


$(document).ready(function() {
$(".foo").mouseover(function(e) {
$(this).css({"color":"red","font-size":"36px"});
});
$(".foo").mouseout(function(e) {
$(this).css({"color":"black", "font-size":"14px"});
});
$("#but1").mouseover(function(e) {
if($(this).is(":visible")){
$(this).val("Кликни меня")}
$("#but1").click(function(e) {
$("#form").hide();
});
});
$("#but1").mouseout(function(e) {
$("#form").show()
});
$("#but1").mouseout(function(e) {
$(this).val("button1")
});
$("#banner").mouseover(function(e) {
$(this).attr("src","../../images/newyard.png")
});
$("#banner").mouseout(function(e) {
$(this).attr("src","../../images/newYear.jpg")
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. События mouseover() и mouseout()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".foo").mouseover(function(e) {
$(this).css({"color":"red","font-size":"36px"});
});
$(".foo").mouseout(function(e) {
$(this).css({"color":"black", "font-size":"14px"});
});
$("#but1").mouseover(function(e) {
if($(this).is(":visible")){
$(this).val("Кликни меня")}
$("#but1").click(function(e) {
$("#form").hide();
});
});
$("#but1").mouseout(function(e) {
$("#form").show()
});
$("#but1").mouseout(function(e) {
$(this).val("button1")
});
$("#banner").mouseover(function(e) {
$(this).attr("src","../../images/newyard.png")
});
$("#banner").mouseout(function(e) {
$(this).attr("src","../../images/newYear.jpg")
});
});
</script>
</head>

<body>
<p id="par1">Кликни меня</p>
<p><img id ="banner" src="../../images/newYear.jpg" alt="С Новым годом"/></p>
<input id="but1" type="button" value="button1" ><br><br>

<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br />
<input name="name" type="text" /><br />
<label for="password">Пароль</label><br />
<input name="password" type="password" /><br /><br />
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" />
Я использую общий компьютер
</label><br /><br />
<input type="submit" value="Войти" /><br />
<label>
<input type="checkbox" name="notify" disabled="true" />
Сохранить мои учетные данные на этом компьютере
</label><br />
</fieldset>
</form>

</div>
</body>
</html>

Событие focus

Событие focus() привязывает или вызывает функцию, код которой будет выполнен, когда выбранный элемент станет активным. Имеет следующий синтаксис:

//Вызываем событие:
$(селектор).focus()
//Привязываем обработчик:
$(селектор).focus(обработчик_события)
Событие blur

Событие blur() привязывает или вызывает функцию, код которой выполнится, когда выбранный элемент перестанет быть активным. Имеет следующий синтаксис:

//Вызываем событие:
$(селектор).blur()
//Привязываем обработчик события к выбранному элементу:
$(селектор).blur(обработчик_события)
Событие change

Событие change() привязывает или вызывает функцию, код которой будет выполнен в случае изменения содержимого выбранного элемента. Имеет следующий синтаксис:

//Вызываем событие:
$(селектор).change()
//Привязываем обработчик:
$(селектор).change(обработчик_события)

Внесем частичное изменение в наш HTML-документ и протестируем данные события.


$(document).ready(function() {
$("#el1").focus(function(e) {
$(this).attr("value", "");
});
$("#el1").blur(function(e) {
$(this).attr("value","Введите ваше имя");
});
$("#el2").focus(function(e) {
$(this).attr("placeholder", "");
});
$("#el2").blur(function(e) {
$(this).attr("placeholder","Введите пароль");
});
$("#bar").change(function() {
alert("Содержимое тестового поля было изменено.")
});
$("#select1").change(function() {
alert("Выбранный элемент был изменен.");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. События focus(), blur() и change()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#el1").focus(function(e) {
$(this).attr("value", "");
});
$("#el1").blur(function(e) {
$(this).attr("value","Введите ваше имя");
});
$("#el2").focus(function(e) {
$(this).attr("placeholder", "");
});
$("#el2").blur(function(e) {
$(this).attr("placeholder","Введите пароль");
});
$("#bar").change(function() {
alert("Содержимое тестового поля было изменено.")
});
$("#select1").change(function() {
alert("Выбранный элемент был изменен.");
});
});
</script>
</head>

<body>
<p>Попробуйте изменить содержимое текстового поля или выбрать элемент в выпадающем списке ниже.</p>
<input id = "bar" name="name" type="text" value="Содержание" style="color:grey;">
<br><br>
<select id="select1">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="jquery">jQuery</option>
</select>
<br><br>
<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<p>Когда текстовое поле станет активным (на нем будет произведен щелчок мыши) подсказка исчезнет. Подсказка будет отображена снова после того, как оно перестанет быть активным (будет произведен щелчек мыши за пределами элемента)</p>
<label for="name">Имя</label><br>
<input id = "el1" name="name" type="text" value="Введите ваше имя" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" >
Я использую общий компьютер
</label><br><br>
<input type="submit" value="Войти" /><br>
<label>
<input type="checkbox" name="notify" disabled="true" >
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>


</body>
</html>

Событие hover

Событие hover() привязывает одну или две функции к выбранному элементу. Код первой привязанной функции выполнится, когда на выбранный элемент будет наведен курсор мыши а второй, когда курсор мыши покинет пределы этого элемента. Имеет следующий синтаксис:

$(селектор).hover(функция1,функция2)

И так вернемся к нашему несколько измененному HTML-примеру. Применим к первому параграфу функцию hover(), и посмотрим как она работает.


$(document).ready(function() {
$("#par1").hover(function(){
$(this).css({"color":"hsla(332,93%,50%,1.00)","font-size":"24px"});
$(this).html("Я оформленный параграф")},
function(){
$(this).css({"color":"#000000","font-size":"16px"});
$(this).html("Я обычный параграф");
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обработка событий. Событие hover</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#par1").hover(function(){
$(this).css({"color":"hsla(332,93%,50%,1.00)","font-size":"24px"});
$(this).html("Я оформленный параграф")},
function(){
$(this).css({"color":"#000000","font-size":"16px"});
$(this).html("Я обычный параграф");
});
});
</script>
</head>

<body>
<p id = "par1">Я обычный параграф</p>
<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input id = "el1" name="name" type="text" value="Введите ваше имя" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" >
Я использую общий компьютер
</label><br><br>
<input type="submit" value="Войти" /><br>
<label>
<input type="checkbox" name="notify" disabled="true" >
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>


</body>
</html>

Метод each

Метод each позволяет исполнить переданную функцию для каждого выбранного элемента. Обратите внимание: для того, чтобы досрочно остановить исполнение функции используйте return false (выполняет действие аналогичное break для циклов). Если Вы хотите пропустить только текущую итерацию используйте return true (выполняет действие аналогичное continue для циклов). Имеет следующий синтаксис:

$(селектор).each(function(индекс,элемент))

Где:

селектор (обязательный параметр) Выбирает элемент (или элементы), для которого будет исполнена функция.
function (обязательный параметр) Функция, которая будет исполнена для каждого выбранного элемента.
индекс (необязательный параметр функции) Индекс элемента в группе выбранных элементов.
элемент (необязательный параметр функции) Текущий элемент (аналогично this).

Щелкните левой кнопкой мыши по тексту "Кликни меня". Будет выведено содержимое абзацев, дочерних элементов тега div с идентификаторов #form.


$(document).ready(function() {
$("#pin").click(function(e) {
$("div#form>p").each(function(index, val) {
alert("Содержимое "+(index+1)+"-го абзаца p: "+val.innerHTML);

});
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Метод each()</title>
<style type="text/css">
#form {display:block; margin:25px 10px;}
#form label{
text-align: right;
margin-right: 10px;
vertical-align: text-top; }

</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#pin").click(function(e) {
$("div#form>p").each(function(index, val) {
alert("Содержимое "+(index+1)+"-го абзаца p: "+val.innerHTML);

});
});
});
</script>
</head>

<body>
<p id="pin">Кликни меня</p>
<div id="form">
<p>Привет всем!</p>
<p class="foo">Другой абзац, но уже с классом.</p>
<p><span>Этот контейнер SPAN .</span></p>
<p id="bar">Абзац с идентификатором
<span class="foo">А этот контейнер SPAN внутри него.</span>
</p>

<form action="#" method="post" >
<fieldset>
<legend>Форма для ввода учетных данных</legend>
<label for="name">Имя</label><br>
<input id = "el1" name="name" type="text" value="Введите ваше имя" style="color:grey;"><br>
<label for="password">Пароль</label><br>
<input id = "el2" name="password" type="password" placeholder = "Введите пароль" ><br><br>
<label>
<input type="radio" name="loc" /> Я использую свой компьютер
</label><br />
<label>
<input type="radio" name="loc" checked="checked" >
Я использую общий компьютер
</label><br><br>
<input type="submit" value="Войти" /><br>
<label>
<input type="checkbox" name="notify" disabled="true" >
Сохранить мои учетные данные на этом компьютере
</label><br>
</fieldset>
</form>

</div>
</body>
</html>

Объект event

Объект event содержит информацию о произошедшем событии.
Объект event создается для каждого произошедшего события, но для того, чтобы иметь возможность обращаться к его свойствам и методам его необходимо явно передать в обработчик события. Имеет следующий синтаксис:

$(селектор).событие(function(event){код_обработчика_события});

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


$(document).ready(function() {
$("#square").click(function(event){
$("#coord").css("display","block");
$("#x").html(event.pageX);
$("#y").html(event.pageY);
});
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Объект event</title>
<style type="text/css">
#square
{
border:1px solid;
width:250px;
height:250px;
font-size:30px;
padding-left:30px;
padding-top:100px;
float:left;
margin-right:15px;
}
#coord
{
font-size:1.2em;
text-align:center;
}
</style>
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#square").click(function(event){
$("#coord").css("display","block");
$("#x").text(event.pageX);
$("#y").text(event.pageY);
});
});
</script>
</head>

<body>
<div style="height:400px">
<div id="square">Щелкните где-нибудь в данном поле.</div>
<div id="coord" style="display:none">Курсор мыши во время того как, произошло событие находился на следующих координатах:<br /><br /> <b>X:<span id="x"></span> Y:<span id="y"> </span></b> </div>
</div>
</body>
</html>