События в 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, а также конкретные примеры из практики, я рассматривал в этом курсе курсе.