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