Обработка событий на 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, а также конкретные примеры из практики, я рассматривал в этом курсе курсе.
-
Создано 18.10.2013 11:49:54
-
Михаил Русаков
Комментарии (4):
Здравствуйте Михаил! Допустим имеется первая группа кнопок: <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?
Ответить
Разобрался я. Вот какой скрипт будет работать: 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; }
Ответить
А зачем bind? Просто $(".add").click(function(){}); Если скрипт в коде вызывается раньше, чем создаётся элемент страницы, то надо обернуть ваш код так: jQuery(document).ready(function($) { ... });
Ответить
Спасибо большое, но лучше добавить стиль cursor: pointer;, иначе пользователь можнт и не разобраться по курсорам, не знает куда кликать, есть ли там ссылка на добавление.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.