Изучаем jQuery. Часть 8.5 События
Доброго времени суток. Мы продолжаем изучать jQuery. И в данной статье мы остановимся на рассмотрении событий связанных с браузерами. Прежде, чем приступить мы вспомним: как подключить jQuery к проекту, как выбрать необходимые элементы, как отфильтровать элементы для более точной выборки. Теперь можно приступить к изучению событий jQuery связанных с браузерами.
И первое событие, которое мы рассмотрим – это событие error()
Событие error()
Событие error() возникает, если при загрузке элемента возникает ошибка. Давайте рассмотрим пример. Возьмем следующий 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"> <img id="image" src="/123.png" > <form action="#" id="myform"> <p>Введите Ваше имя</p> <input id="name" type="text" size="40" value="123"> <input type="submit"> <input type="reset"> </form> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Мы вставляем картинку <img id=»image» src=»/123.png» >, которой заведомо нет на сервере, т.е картинка загрузиться не сможет. Теперь если картинка не загружена, то должно появиться сообщение «Картинка не загружена». Для этого в наш файл со скриптом вставим следующий код:
$(function(){
$('#image').error(function(){
alert('Картинка не загружена');
});
});
Смотрим видео.
Событие resize()
Событие resize() возникает, когда происходит изменение размера окна. Рассмотрим пример. Возьмем html-код приведенный выше. Теперь мы хотим, чтобы при изменение окна браузера у нас появилось сообщение «Размер окна браузера изменился». Для этого в наш файл скриптов добавим следующий код:
$(window).resize(function(){
alert('Размеры окна браузера изменилось.');
});
Смотрим демонстрационное видео.
Событие scroll()
Событие scroll() возникает, когда элемент был прокручен. Давайте рассмотрим пример. Возьмем следующи 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"> <img id="image" src="/123.png" > <form action="#" id="myform"> <p>Введите Ваше имя</p> <input id="name" type="text" size="40" value="123"> <input type="submit"> <input type="reset"> <p><textarea rows="5" cols="21" name="text" >Пример события scroll Пример события scroll Пример события scroll Пример события scroll Пример события scroll Пример события scroll</textarea></p> </form> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь, когда мы прокручиваем элемент textarea у нас должно появиться сообщение «Элемент textarea был прокручен. Для этого в файл скриптов добавим следующий код:
$(function(){
$('textarea').scroll(function(){
alert('Элемент textarea был прокручен');
});
});
Смотрим видео.
Мы с Вами рассмотрели три события jQuery связанные с браузером. А в следующей, заключительной статье о событиях jQuery, мы остановимся на событиях связанных с загрузкой страницы. Так, что не пропускайте выхода новых статей.
