Изучаем jQuery. Часть 8.1 События
Доброго времени суток. Мы продолжаем изучать jQuery и с этой статьи мы начинаем рассматривать события в jQuery. Что такое событие в jQuery? Это некоторое действие, которое пользователь совершает на странице, например клик по некоторому элементу или перемещение курсора мыши на странице.
А в данной статье мы остановимся на событиях связанных с мышью.
И первое событие связано с одним кликом.
Событие click()
Событие click() возникает при одном щелчке мышки на элементе.
Рассмотрим html-код:
<!doctype html> <html lang="ru"> <head> <meta charset="UTF-8"> <link href="./css/style.css" rel="stylesheet" media="screen"> <script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="./js/script.js"></script> <title>Изучаем jQuery</title> </head> <body> <div id="wrapper"> <div id="header" align="center">Header</div> <div id="example"><p>Example</p></div> <div id="content"> <p>Content</p> <p>Test</p> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь мы хотим, чтобы при щелчке на элементе div с id=»example» выскакивало сообщение «Вы кликнули один раз по элементу с id=’example’ »
Для этого в нашем файле скриптов добавим следующий код:
$(function(){
$("#example").click(function(){
alert("Вы кликнули один раз по элементу с id='example' ");
});
});
Что мы сделали?
Первое, дождались загрузки страницы. Затем выбрали элемент с id=’example’ ($(«#example»)) и указали, что при возникновении события click должна быть вызвана анонимная функция, которая показывает сообщение.
Событие dblclick()
Событие dblclick() возникает при двойном щелчке на элементе.
Давайте рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы при двойном щелчке на элементе div с id=»example» выскакивало сообщение «Вы сделали двойной щелчок по элементу с id=’example’ »
Для этого изменим в нашем файле скриптов код на следующий:
$(function(){
$("#example").dblclick(function(){
alert("Вы сделали двойной щелчок по элементу с id='example' ");
});
});
Смотрим видео.
Событие mouseover()
Событие mouseover() возникает, когда курсор мыши появляется над элементом.
Рассмотрим выше приведенный html-код. Теперь мы хотим, чтобы при наведении курсора на элемент div с id=’example’ внутри него надпись «Example» изменилась на надпись «Курсор мыши над элементом c id=’example’». Для этого добавим в наш файл скриптов следующий код:
$(function(){
$("#example").mouseover(function(){
$(this).text("Курсор мыши над элементом c id='example'");
});
});
Смотрим, что получилось.
Событие mouseout()
Событие mouseout() возникает, когда курсор покидает пределы элемента. Давайте рассмотрим html-код приведенный выше. И наша задача заключается в том, чтобы, кода курсор покинет пределы элемента div с id=id=’example’ надпись в этом элементе «Example» изменилась на «Курсор мыши покинул пределы элемента c id=’example’». Для этого в файл со скриптами добавим следующий код:
$(function(){
$("#example").mouseout(function(){
$(this).text("Курсор мыши покинул пределы элемента c id='example'");
});
});
Смотрим, что получилось.
Событие mousedown()
Событие mausedown() возникает в момент, когда мы нажимаем кнопку мыши над элементом, но еще не отпустили её.
Рассмотрим html-код приведенный выше. И мы хотим, чтобы при нажатии на кнопку над элементом div с id=’example’ появилось сообщение «Вы нажали на кнопку мыши: <код кнопки>». Для этого добавим следующий код в наш файл скриптов:
$(function(){
$("#example").mousedown(function(eventObject){
alert('Вы нажали на кнопку мыши:' + eventObject.which);
});
});
Смотрим видео.
Событие mouseup()
Событие mouseup() возникает в момент, когда мы отпускаем нажатую кнопку мыши над элементом.
Рассмотрим html-код приведенный выше. И мы хотим, чтобы при отжимании кнопки над элементом div с id=’example’ появилось сообщение «Вы отпустили кнопку мыши: <код кнопки>». Для этого добавим следующий код в наш файл скриптов:
$(function(){
$("#example").mouseup(function(eventObject){
alert('Вы отпустили кнопку мыши:' + eventObject.which);
});
});
Событие mousemove()
Событие mousemove() возникает, когда курсор мыши начинает двигаться в внутри элемента.
Давайте рассмотрим html-код приведенный выше. Теперь мы хотим вывести сообщение «Курсор мыши был сдвинут». Для этого добавим в наш файл со скриптами следующий код:
$(function(){
$("#example").mousemove(function(){
alert('Курсор мыши был сдвинут');
});
});
Событие mouseenter()
Событие mouseenter() возникает, когда курсор мыши появляется над элементом. Данное событие аналогично событию mouseover(), но реализовано лучше чем mouseover().
Рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы при наведении курсора на элемент div с id=’example’ внутри него надпись «Example» изменилась на надпись «Курсор мыши над элементом c id=’example’». Для этого добавим в наш файл скриптов следующий код:
$(function(){
$("#example").mouseenter(function(){
$(this).text("Курсор мыши над элементом c id='example'");
});
});
Смотрим, что получилось.
Событие mouseleave()
Событие mouseleave() возникает, когда курсор мыши покидает область над элементом. Это событие аналогично событию mouseout(), но реализовано лучше.
Рассмотрим html-код приведенный выше. И наша задача заключается в том, чтобы, кода курсор покинет пределы элемента div с id=id=’example’ надпись в этом элементе «Example» изменилась на «Курсор мыши покинул пределы элемента c id=’example’». Для этого в файл со скриптами добавим следующий код:
$(function(){
$("#example").mouseleave(function(){
$(this).text("Курсор мыши покинул пределы элемента c id='example'");
});
});
Смотрим.
Мы с Вами рассмотрели основные события jQuery связанные с мышкой.
[…] мы с Вами уже рассмотрели события связанные с мышкой «Изучаем jQuery. Часть 8.1 События». А в этой статье мы остановимся событиях связанных с […]