📘 Урок 14: jQuery и работа с событиями — делегирование, namespace, пользовательские события

Оглавление

📌 Заключение

Цель: научиться работать с событиями в jQuery на продвинутом уровне: делегировать события, использовать namespaces и создавать собственные события.

🔹 Основы событий в jQuery

.on(event, selector, handler) — навешивает обработчик
.off(event, handler) — снимает обработчик
.trigger(event) — вызывает событие вручную

🔸 Делегирование событий

Когда элементы динамически добавляются в DOM, прямое навешивание обработчиков не работает. Решение — навесить обработчик на родителя и ловить события в процессе всплытия.

$('#parent').on('click', '.child', function() {
  alert('Клик по дочернему элементу');
});

🔸 Почему делегирование удобно?

Обработчик один для многих элементов
Работает для динамически добавленных элементов
Уменьшает нагрузку на DOM

🔸 Namespace для событий

Можно группировать события с помощью namespace:

$('#btn').on('click.myNamespace', function() { ... });
$('#btn').off('.myNamespace'); // снимет все обработчики с этим namespace

🔸 Пользовательские события

Можно создавать свои события и вызывать их:

$('#box').on('myCustomEvent', function(e, param1) {
  alert('Событие с параметром: ' + param1);
});

$('#box').trigger('myCustomEvent', ['Привет']);

🔸 Отмена стандартного поведения

$('a').on('click', function(e) {
  e.preventDefault();
  alert('Переход отменён');
});

🔸 Передача данных в обработчик

$('#btn').on('click', {foo: 'bar'}, function(e) {
  console.log(e.data.foo); // bar
});

🔸 События мыши, клавиатуры и форм

.click(), .dblclick()
.mouseenter(), .mouseleave()
.keydown(), .keyup()
.submit()

📋 Практические задания

Навесь делегированный обработчик клика на динамически создаваемые элементы списка.
Используй namespace для событий, чтобы удобно удалять их группами.
Создай и вызови собственное событие с параметрами.
Отмени действие по умолчанию для ссылок на странице.
Передай данные в обработчик события.

❗ Частые ошибки

❌ Навешивание обработчиков на динамические элементы напрямую

Они не работают, если элемент появится после навешивания.

❌ Забыл вызвать `e.preventDefault()` для отмены действия

❌ Некорректное использование namespaces, например, `.off('click')` вместо `.off('click.myNamespace')`

📌 Заключение

События — основа интерактивности на сайте. Продвинутая работа с ними через делегирование, namespaces и пользовательские события позволит писать более чистый и удобный код.

Jquery

+ Читать