on и off

Библиотека Masonry реализует систему пользовательских событий, позволяющую отслеживать внутренние процессы раскладки элементов. События используются для синхронизации интерфейса, выполнения дополнительной логики после перерасчёта сетки, интеграции с другими библиотеками и управления жизненным циклом компонентов.

Подписка и отписка от событий выполняется через методы on и off. Эти методы предоставляются базовым механизмом событий, встроенным в архитектуру Masonry.

Метод on

Метод on регистрирует обработчик события. После регистрации функция-обработчик вызывается каждый раз, когда указанное событие происходит внутри экземпляра Masonry.

Синтаксис

masonryInstance.on( eventName, listener )

Параметры

Параметр Тип Описание
eventName String Имя события
listener Function Функция-обработчик

Пример подписки на событие layoutComplete

Событие layoutComplete срабатывает после завершения расчёта и применения расположения элементов.

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

msnry.on('layoutComplete', function(items) {
  console.log('Раскладка завершена');
  console.log('Количество элементов:', items.length);
});

Особенности события

  • вызывается после полного пересчёта сетки
  • передаёт массив элементов, участвовавших в раскладке
  • позволяет запускать дополнительные UI-процессы

Подписка на несколько событий

Для одного экземпляра Masonry может быть зарегистрировано любое количество обработчиков.

msnry.on('layoutComplete', function() {
  console.log('layoutComplete');
});

msnry.on('removeComplete', function() {
  console.log('removeComplete');
});

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

Основные события Masonry

layoutComplete

Срабатывает после завершения процесса раскладки.

msnry.on('layoutComplete', function(items) {
  console.log('Размещено элементов:', items.length);
});

Используется для:

  • запуска анимаций
  • обновления интерфейса
  • синхронизации с другими компонентами

removeComplete

Вызывается после удаления элементов из сетки.

msnry.on('removeComplete', function(items) {
  console.log('Удалено:', items.length);
});

Применение:

  • очистка связанных данных
  • обновление счётчиков
  • логирование действий

Метод off

Метод off удаляет ранее зарегистрированный обработчик события.

Синтаксис

masonryInstance.off( eventName, listener )

Параметры

Параметр Тип Описание
eventName String Имя события
listener Function Функция, ранее переданная в on

Удаление выполняется только при передаче той же самой функции, которая использовалась при подписке.

Пример отписки от события

function onLayout(items) {
  console.log('Layout complete');
}

msnry.on('layoutComplete', onLayout);

// позже
msnry.off('layoutComplete', onLayout);

После вызова off обработчик больше не вызывается.

Причины использования off

Отписка от событий важна в следующих ситуациях:

1. Удаление компонентов

При уничтожении интерфейсного блока необходимо удалить слушатели, чтобы избежать обращений к несуществующим DOM-элементам.

2. Предотвращение утечек памяти

Если объект Masonry живёт дольше, чем компонент интерфейса, оставшиеся обработчики могут удерживать ссылки на ненужные данные.

3. Временное отключение логики

Иногда требуется временно остановить реакцию на событие.

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

var grid = document.querySelector('.grid');

var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200
});

function handleLayout(items) {
  console.log('Layout finished:', items.length);
}

msnry.on('layoutComplete', handleLayout);

setTimeout(function() {
  msnry.off('layoutComplete', handleLayout);
  console.log('Обработчик отключён');
}, 5000);

Поведение:

  1. обработчик регистрируется
  2. в течение 5 секунд реагирует на события
  3. затем удаляется

Хранение ссылок на обработчики

Для корректной работы off необходимо сохранять ссылку на функцию-обработчик.

Неправильный вариант

msnry.on('layoutComplete', function() {
  console.log('done');
});

msnry.off('layoutComplete', function() {
  console.log('done');
});

Отписка не произойдёт, поскольку это два разных объекта функции.

Правильный вариант

function handler() {
  console.log('done');
}

msnry.on('layoutComplete', handler);
msnry.off('layoutComplete', handler);

Подписка до инициализации раскладки

Слушатели можно регистрировать сразу после создания экземпляра Masonry.

var msnry = new Masonry('.grid');

msnry.on('layoutComplete', function() {
  console.log('Первичная раскладка завершена');
});

Первый вызов события произойдёт после начального layout.

Комбинирование событий и методов Masonry

События часто используются совместно с методами управления элементами.

Добавление элементов

msnry.on('layoutComplete', function(items) {
  console.log('Обновление интерфейса');
});

msnry.appended(newItems);
msnry.layout();

Последовательность:

  1. добавление новых элементов
  2. перерасчёт сетки
  3. вызов layoutComplete
  4. выполнение пользовательской логики

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

Современный синтаксис JavaScript допускает использование стрелочных функций.

msnry.on('layoutComplete', (items) => {
  console.log(items.length);
});

Однако при необходимости удаления обработчика стрелочную функцию необходимо сохранить в переменную.

Управление событиями при уничтожении Masonry

При полном удалении экземпляра рекомендуется предварительно убрать обработчики.

function layoutHandler() {
  console.log('layout');
}

msnry.on('layoutComplete', layoutHandler);

msnry.off('layoutComplete', layoutHandler);
msnry.destroy();

Такая последовательность гарантирует корректное освобождение ресурсов.

Внутренний механизм работы on и off

Masonry использует простой механизм событийного эмиттера:

  1. каждому событию соответствует массив обработчиков
  2. метод on добавляет функцию в массив
  3. метод off удаляет функцию из массива
  4. при возникновении события все функции массива вызываются последовательно

Упрощённая схема:

listeners = {
  layoutComplete: [fn1, fn2, fn3],
  removeComplete: [fn4]
}

При генерации события layoutComplete выполняются fn1, fn2, fn3.

Массовая регистрация обработчиков

При большом количестве событий часто применяют структурированный подход.

var handlers = {
  layoutComplete(items) {
    console.log('layout', items.length);
  },
  removeComplete(items) {
    console.log('removed', items.length);
  }
};

msnry.on('layoutComplete', handlers.layoutComplete);
msnry.on('removeComplete', handlers.removeComplete);

Это упрощает управление обработчиками и их последующее удаление.

Использование событий для синхронизации интерфейса

Одна из распространённых задач — синхронизация Masonry с другими компонентами страницы.

Пример: обновление индикатора загрузки.

loader.show();

msnry.on('layoutComplete', function() {
  loader.hide();
});

Пока выполняется расчёт сетки, отображается индикатор. После завершения раскладки он скрывается.

Отписка от всех обработчиков события

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

Практический подход — хранить массив обработчиков и удалять их в цикле.

handlers.forEach(function(handler) {
  msnry.off('layoutComplete', handler);
});

События как инструмент расширения Masonry

Методы on и off позволяют использовать Masonry как часть более сложной архитектуры интерфейса:

  • реакция на изменения DOM
  • интеграция с lazy-loading
  • синхронизация с виртуальными списками
  • построение сложных UI-компонентов

Система событий превращает библиотеку из простого алгоритма раскладки в управляемый элемент интерфейсной логики.

Оглавление