<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Обработка событий на jQuery

Обработка событий на jQuery

События в JavaScript являются важнейшей составляющей большинства скриптов. Фактически, большинство задач, которые делаются в JavaScript, начинают свою работу при возникновения какого-либо события. В этой статье мы разберём, как реализована обработка событий в jQuery.

Прежде чем приступать к событиям, важно сразу понять, что есть 2 типа элементов: созданные непосредственно самим сервером и добавленные после с помощью JavaScript. События, возникающие на первом типе элементов, можно обрабатывать следующим образом:

<span id="add">Добавить в блок span</span>
<div id="block"></div>
<script type="text/javascript">
  $("span#add").bind("click", function() {
    $("#block").append("<span>Добавленный блок</span>");
  });
</script>

Код достаточно прозрачный, но всё равно поясню. События устанавливаются с помощью метода bind. Первым параметров идёт название события, в примере - это "click". Безусловно, событий достаточно много. Вторым параметром идёт функция, которую мы сразу реализуем. Также можно было эту функцию объявить в другом месте, а в качестве 2-го параметра указать лишь её имя.

Теперь разберём, как ставить обработку событий не только на созданные заранее элементы, но и на те, которые были созданы уже с помощью JavaScript. Для этого раньше был метод live(), однако, в новых версиях jQuery он уже не работает, поэтому сейчас используется метод on():

<span id="add">Добавить в блок span</span>
<br />
<span>Чтобы удалить элемент, кликните по нему 2 раза</span>
<div id="block"></div>
<script type="text/javascript">
  $("span#add").bind("click", function() {
    $("#block").append("<span>Добавленный блок</span>");
  });
  $(document).on("dblclick", "#block span", deleteSpan);
  function deleteSpan(event) {
    $(event.target).remove();
  }
</script>

В данном примере был использован метод on(). Первым параметром идёт название события, затем к каким элементам подключается это событие, а после название функции. В этом примере я решил вынести функцию отдельно, чтобы продемонстрировать, как обойтись без function () {} внутри метода. Также был использован объект event, который передаётся в функцию-обработчик после возникновения события. Данный объект содержит много свойств, и самое популярное из них - это target, содержащее элемент, на котором возникло событие. Остальное я, думаю, не нуждается в комментариях.

И обратите внимание, что если bind() можно применять только для созданных изначально элементов, то метод on() работает со всеми элементами: и старыми, и новыми.

Более подробно про обработку событий в jQuery, а также конкретные примеры из практики, я рассматривал в этом курсе курсе.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (4):

EvgeTrofi EvgeTrofi 16.11.2013 12:09:43

Здравствуйте Михаил! Допустим имеется первая группа кнопок: <div id="26" class="wallet_out">Значение 26</div> <div id="32" class="wallet_out">Значение 32</div> И вторая группа: <div id="26" class="wallet_in">Значение 26</div> <div id="32" class="wallet_in">Значение 32</div> А внизу ещё одна кнопка, которая показывает результат от том, какие кнопки из каждой группы были нажаты. <div class="result"> Посмотреть результат </div> Затем делаем такой код: var button1 = 0; var button2 = 0; $(".result").bind("click", function() { //Назначение событие нажатия на класс .result alert("Нажали "+button1+" и "+button2); }); var elements = $(".wallet_out"); for (var i = 0; i < elements.length; i++){ $("div#" + elements[i].className).bind("click", setB1(elements[i])); } function setB1(event){ button1 = event.id; } Вопрос: почему ответ всегда 32?

Ответить

EvgeTrofi EvgeTrofi 16.11.2013 12:25:20

Разобрался я. Вот какой скрипт будет работать: var button1 = 0; var button2 = 0; $(".result").bind("click", function() { alert("Нажали "+button1+" и "+button2); }); var elements = $(".wallet_out"); for (var i = 0; i < elements.length; i++){ $(elements[i]).bind("click", setB1); } var elements = $(".wallet_in"); for (var i = 0; i < elements.length; i++){ $(elements[i]).bind("click", setB2); } function setB1(event){ button1 = event.target.id; } function setB2(event){ button2 = event.target.id; }

Ответить

rysich rysich 12.12.2013 00:35:35

А зачем bind? Просто $(".add").click(function(){}); Если скрипт в коде вызывается раньше, чем создаётся элемент страницы, то надо обернуть ваш код так: jQuery(document).ready(function($) { ... });

Ответить

1111g 1111g 28.10.2014 20:45:23

Спасибо большое, но лучше добавить стиль cursor: pointer;, иначе пользователь можнт и не разобраться по курсорам, не знает куда кликать, есть ли там ссылка на добавление.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.