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

Библиотека fullPage.js предоставляет мощный механизм работы с событиями, позволяющий отслеживать действия пользователя и реагировать на них в реальном времени. События делятся на два типа: инициализационные и пользовательские, и могут быть привязаны как к отдельным слайдам, так и ко всей странице.

Основные методы подписки на события

Для работы с событиями используются следующие методы:

  1. afterLoad Срабатывает после завершения анимации загрузки нового слайда. Принимает два параметра: origin и destination.
new fullpage('#fullpage', {
    afterLoad: function(origin, destination, direction){
        console.log('Загружен слайд:', destination.index);
    }
});
  1. onLeave Активируется перед уходом со слайда, до начала анимации. Параметры: origin, destination, direction.
new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction){
        console.log(`Покидаем слайд ${origin.index}, направление: ${direction}`);
    }
});
  1. afterRender Вызывается один раз после полной инициализации fullPage.js, когда все слайды готовы.
new fullpage('#fullpage', {
    afterRender: function(){
        console.log('FullPage полностью загружен');
    }
});
  1. afterResize Срабатывает после изменения размера окна браузера.
new fullpage('#fullpage', {
    afterResize: function(width, height){
        console.log(`Новые размеры: ${width}x${height}`);
    }
});
  1. afterSlideLoad и onSlideLeave Эти события аналогичны afterLoad и onLeave, но применяются к внутренним слайдам (горизонтальные секции).
new fullpage('#fullpage', {
    afterSlideLoad: function(section, origin, destination, direction){
        console.log(`Внутренний слайд ${destination.index} загружен`);
    }
});

Подписка на события через API

FullPage.js позволяет динамически управлять событиями через методы fullpage_api. Для добавления обработчика используется стандартный синтаксис Jav * aScript:

fullpage_api.setAllowScrolling(true); // управление прокруткой

Однако для событий можно использовать кастомные обработчики через библиотеку событий браузера:

document.addEventListener('fpAfterLoad', function(e){
    console.log('Слайд загружен:', e.detail.destination.index);
});

Для таких событий fpAfterLoad, fpOnLeave, fpAfterSlideLoad объект события содержит detail с ключевыми данными: индекс секции, направление, ссылку на DOM-элемент слайда.

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

Для предотвращения утечек памяти или ненужного срабатывания событий рекомендуется уметь отписываться от них. Для событий fullPage.js через API это делается вручную, если обработчики были привязаны через addEventListener:

function handleAfterLoad(e){
    console.log('Слайд загружен:', e.detail.destination.index);
}

document.addEventListener('fpAfterLoad', handleAfterLoad);

// Когда нужно удалить обработчик:
document.removeEventListener('fpAfterLoad', handleAfterLoad);

Если обработчики задаются в конфигурации при инициализации, их можно отключить через изменение опций и перезапуск fullPage:

fullpage_api.destroy('all'); // полностью удаляет fullPage.js с текущей страницы

Важные нюансы при работе с событиями

  • Порядок срабатывания: onLeave выполняется до анимации, afterLoad — после. Это позволяет разделять логику предварительной подготовки и финального отображения.
  • Контекст this: Внутри обработчика this ссылается на объект fullpage_api.
  • Параметры: У всех событий есть доступ к объектам origin, destination, где index указывает номер секции или слайда, а anchor — уникальный идентификатор.
  • Вертикальные и горизонтальные события: Важно различать события для основных секций (afterLoad, onLeave) и для внутренних слайдов (afterSlideLoad, onSlideLeave).

Комбинирование событий и динамическое управление

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

let slideLoaded = false;

function onSlideLoadHandler(section, origin, destination, direction){
    if(!slideLoaded && destination.index === 2){
        console.log('Вторая секция загружена впервые');
        slideLoaded = true;
        document.removeEventListener('fpAfterLoad', onSlideLoadHandler);
    }
}

document.addEventListener('fpAfterLoad', onSlideLoadHandler);

Такой подход предотвращает повторные вызовы обработчиков, экономит ресурсы и повышает стабильность работы сайта.

Практические советы

  • Использовать afterRender для инициализации сторонних плагинов после того, как fullPage полностью загрузился.
  • Для сложных интерфейсов применить декларативные обработчики через конфигурацию при инициализации.
  • Для динамически подгружаемых контентов важно подписываться на события после вставки элементов в DOM.
  • Отписка от событий обязательна при удалении секций или слайдов, чтобы избежать «висячих» обработчиков.

Эффективное управление событиями в fullPage.js позволяет реализовать плавную навигацию, сложные анимации и интерактивные элементы, минимизируя нагрузку на страницу и повышая отзывчивость интерфейса.

Оглавление