Callback-функции

Callback-функции в Dom7 представляют собой функции, которые передаются как аргументы другим методам библиотеки и вызываются при наступлении определённого события или после завершения операции. Этот подход позволяет писать асинхронный и реактивный код, управлять поведением элементов страницы и упрощает обработку событий.

В Dom7 многие методы для работы с DOM принимают callback-функции, что делает библиотеку гибкой и удобной для динамических интерфейсов.

Использование callback в методах обхода элементов

Dom7 предоставляет методы .each() и .map(), которые перебирают элементы выборки. В этих методах callback-функция получает индекс и сам элемент, что позволяет применять произвольные операции к каждому объекту.

const items = $('.item');

items.each((index, el) => {
    el.textContent = `Элемент номер ${index}`;
});

В этом примере:

  • index — порядковый номер элемента в выборке;
  • el — текущий DOM-элемент;
  • Callback вызывается для каждого элемента коллекции.

Метод .map() возвращает новый массив с результатами работы callback:

const texts = items.map((index, el) => el.textContent);
console.log(texts);

Callback-функции при работе с событиями

Методы .on() и .off() используют callback для привязки и удаления обработчиков событий. Callback-функция получает объект события как аргумент, что позволяет управлять поведением элемента при кликах, наведениях и других событиях.

$('.button').on('click', function(event) {
    event.preventDefault();
    console.log('Кнопка нажата:', this);
});

Особенности:

  • this внутри callback ссылается на элемент, к которому привязан обработчик.
  • Можно использовать стрелочные функции, но тогда this будет указывать на внешний контекст.

Удаление обработчиков выполняется так:

function handleClick(event) {
    console.log('Обработчик удалён');
}

$('.button').on('click', handleClick);
$('.button').off('click', handleClick);

Асинхронные операции с callback

Dom7 часто применяется вместе с анимациями и динамическим изменением классов. Методы вроде .fadeIn(), .fadeOut(), .slideUp(), .slideDown() принимают callback, который выполняется после завершения анимации.

$('.box').fadeOut(500, () => {
    console.log('Анимация завершена, элемент скрыт');
});

Особенности:

  • Callback гарантированно выполняется после окончания эффекта.
  • Можно комбинировать несколько анимаций через последовательные вызовы callback.

Контекст и аргументы callback

Dom7 передаёт элемент коллекции в callback как this или аргумент, в зависимости от метода. Методы .each(), .map() предоставляют элемент первым аргументом, а .on() — объект события.

// this в callback метода each
$('.item').each(function(index) {
    console.log(index, this); // this — DOM-элемент
});

// event в callback метода on
$('.item').on('mouseenter', function(event) {
    console.log(event.type, this);
});

Использование стрелочных функций изменяет поведение this:

$('.item').each((index, el) => {
    console.log(el); // this здесь не используется
});

Встроенные callback в Dom7 для динамических изменений

Методы .css(), .html(), .text() и другие могут принимать callback для динамического вычисления значений.

$('.item').css('color', (index, currentValue) => {
    return index % 2 === 0 ? 'red' : 'blue';
});

$('.item').text((index, oldText) => {
    return `Элемент ${index}: ${oldText}`;
});

Аргументы callback:

  • index — порядковый номер элемента;
  • currentValue / oldText — текущее значение свойства или содержимого элемента.

Передача дополнительных данных в callback

Методы .on() позволяют передавать дополнительные параметры в callback через объект данных:

$('.button').on('click', { userId: 123, role: 'admin' }, function(event) {
    console.log(event.data.userId); // 123
    console.log(event.data.role);   // admin
});

Особенности:

  • event.data содержит любые данные, переданные при привязке обработчика.
  • Позволяет хранить контекст без глобальных переменных.

Совмещение нескольких callback

Dom7 поддерживает цепочку методов, что позволяет вызывать несколько callback последовательно, без лишнего кода:

$('.item')
    .fadeOut(300, () => console.log('Скрыт первый элемент'))
    .fadeIn(300, () => console.log('Показан первый элемент'));

Такой подход облегчает создание сложных анимационных последовательностей и реакцию на пользовательские действия.

Резюме по callback в Dom7

Callback-функции в Dom7:

  • Универсальный инструмент для перебора элементов, управления событиями и анимациями.
  • Могут принимать аргументы: индекс, элемент, объект события или текущее значение.
  • Используются для динамического изменения DOM и обеспечения реактивного поведения.
  • Поддерживают передачу данных и управление контекстом через this или параметры callback.

Правильное использование callback-функций позволяет создавать читаемый, масштабируемый и гибкий код, полностью используя возможности библиотеки Dom7.

Оглавление