Подписка на события

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

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

События в Muuri можно разделить на несколько категорий:

  1. События элементов

    • add — срабатывает при добавлении элемента в сетку.
    • remove — вызывается при удалении элемента.
    • show / hide — срабатывают при показе или скрытии элемента.
    • move — возникает, когда элемент изменяет своё положение.

  2. События сетки

    • layoutStart — запускается перед началом перестройки сетки.
    • layoutEnd — срабатывает после завершения перестройки.
    • dragStart, dragReleaseStart, dragReleaseEnd, dragEnd — события, связанные с перетаскиванием элементов.
    • sort — вызывается после сортировки элементов.
    • filter — возникает после применения фильтра к элементам.

  3. События пользовательских действий Muuri позволяет подписываться на собственные события или создавать пользовательские события через механизм emit.

Подписка на события

Для подписки используется метод .on(eventName, callback), где eventName — название события, а callback — функция, выполняемая при его возникновении.

const grid = new Muuri('.grid');

grid.on('add', (items) => {
    console.log('Добавлены элементы:', items);
});

grid.on('remove', (items) => {
    console.log('Удалены элементы:', items);
});

grid.on('layoutEnd', () => {
    console.log('Перестройка сетки завершена');
});

Особенности подписки:

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

Получение данных о событии

В некоторых событиях Muuri передает дополнительные параметры:

  • move

    grid.on('move', (items, fromIndex, toIndex) => {
    console.log(`Элемент перемещен с ${fromIndex} на ${toIndex}`, items);
});

  • dragReleaseEnd

    grid.on('dragReleaseEnd', (item) => {
    console.log('Элемент отпущен после перетаскивания', item);
});

Каждый элемент, передаваемый в колбеке, является объектом Muuri Item, который предоставляет методы:

  • .getElement() — возвращает HTML-элемент.
  • .getGrid() — возвращает сетку, к которой принадлежит элемент.
  • .hide() / .show() — управление видимостью элемента.
  • .move() — перемещение элемента в другую позицию.

Подписка на события отдельных элементов

Можно подписываться не только на сетку целиком, но и на отдельные элементы:

const item = grid.getItems()[0];

item.on('show', () => {
    console.log('Элемент показан');
});

item.on('hide', () => {
    console.log('Элемент скрыт');
});

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

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

Muuri поддерживает создание собственных событий с помощью метода .emit:

grid.on('customEvent', (data) => {
    console.log('Пользовательское событие', data);
});

// Генерация события
grid.emit('customEvent', { message: 'Hello Muuri' });
  • Любое событие можно использовать так же, как встроенные.
  • Пользовательские события позволяют реализовать сложные взаимодействия внутри сетки.

Практические рекомендации

  • Группировка логики: объединять обработчики, связанные с одним типом действий, удобно для поддерживаемого кода.
  • Удаление обработчиков: всегда использовать .off при необходимости отключить подписку, чтобы избежать утечек памяти.
  • Использование once: для одноразовых событий удобно использовать метод .once(eventName, callback), который автоматически удаляет обработчик после первого срабатывания.
grid.once('layoutEnd', () => {
    console.log('Перестройка выполнена только один раз');
});
  • Отслеживание динамически добавленных элементов: события add и remove позволяют контролировать элементы, которые появляются после инициализации сетки.

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

Оглавление