Изучаем jQuery. Часть 8.3 События

Ромчик
0

Уроки по jQuery

Доброго времени суток. Мы продолжаем изучать события 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. Так, что не пропускайте появления новых постов.

Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger

©2012-2017 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика