Изучаем jQuery. Часть 8.3 События
Доброго времени суток. Мы продолжаем изучать события jQuery. Так мы с Вами рассмотрели события связанные с мышкой «Изучаем jQuery. Часть 8.1 События», в статье «Изучаем jQuery. Часть 8.2 События» мы остановились на событиях связанных с клавиатурой. А в данной статье мы рассмотрим события связанные с html-формой. Т.к. основных событий возникающих при работе с формой достаточно много, то разобьем эту статью на две части. В этой статье рассмотрим события: focus(), focusin(), focusout(), blur(). Прежде, чем приступить к изучению данных событий jQuery необходимо вспомнить как подключается jQuery к проекту. А по мере изучения этих событий мы вспомним как производить выборку необходимых элементов. Ну, что ж приступим.
И первое событие jQuery, которое мы рассмотрим – это событие focus().
Событие focus()
Событие focus() возникает, когда выбранный элемент получает фокус. Давайте рассмотрим пример, а затем продемонстрируем его на видео.
У нас есть следующий 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"> <form action="#"> <p>Введите Ваше имя</p> <input id="name" type="text" size="40"> </form> </div> <div id="sidebar"><span>Sidebar</span></div> <div id="clear"></div> </div> <div id="footer"> Footer </div> </body> </html>
Теперь, когда мы передаем фокус элементу input с id=’name’ у нас появилось сообщение «Передан фокус элементу input». Для этого изменим в нашем файле скриптов код на:
$(function(){
$("#name").focus(function(){
alert("Передан фокус элементу input с id='name'");
});
});
Событие blur()
Событие blur() возникает, когда выбранный элемент теряет фокус. Рассмотрим приведенный выше html-код. Теперь мы хотим, чтобы когда элемент input с id=’name’ потерял фокус появилась надпись «Элемент input с id=’name’ потерял фокус». Для этого изменим наш скрипт:
$(function(){
$("#name").blur(function(){
alert("Элемен input с id='name' потерял фокус");
});
});
Событие focusin()
Событие focusin() возникает, когда элемент или его дочерний элемент получает фокус. Пример. Рассмотрим html-код приведенный выше. Теперь мы хотим, чтобы у нас появилась надпись «Сробатоло событие focusin()», когда элемент div с id=’ content’ или его дочерний элемент получил фокус. В нашем случаем дочерним элементом является input с id=’name’, который будет получать фокус. Для этого изменим наш скрипт следующим образом:
$(function(){
$("#content").focusin(function(){
alert("Сработало событие focusin()");
});
});
Смотрим видео
Событие focusout()
Событие focusout() возникает, когда элемент или дочерний элемент теряет фокус. Рассмотрим пример. Берем html-код приведенный выше. Теперь наша задача состоит в том, чтобы кода элемент div с id=’content’ или его дочерний элемент (в нашем случае элемент input с id=’name’ потерял фокус появилось сообщение «Сработало событие focusout()». Для этого изменим наш скрипт:
$(function(){
$("#content").focusout(function(){
alert("Сработало событие focusout()");
});
});
Мы с Вами рассмотрели четыре события jQuery, связанные с элементами html-формы. В следующей статье мы продолжим изучения событий jQuery. Так, что не пропускайте появления новых постов.
