Глобальные и локальные слушатели

Interact.js предоставляет мощный и гибкий механизм для обработки взаимодействий с элементами DOM через события. Основное различие в работе событий заключается в их уровне привязки: глобальные слушатели и локальные слушатели. Понимание этого различия критично для эффективного управления взаимодействиями и оптимизации производительности.

Локальные слушатели

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

interact('.draggable')
  .draggable({
    listeners: {
      start (event) {
        console.log('Начало перетаскивания', event.target);
      },
      move (event) {
        event.target.style.transform = 
          `translate(${event.dx}px, ${event.dy}px)`;
      },
      end (event) {
        console.log('Конец перетаскивания', event.target);
      }
    }
  });

Ключевые моменты локальных слушателей:

• Привязка к конкретному селектору или элементу.
• Позволяют точно контролировать обработку взаимодействий для отдельных объектов.
• Используются для drag, resize, gesturable и других видов интерактивности.
• События start, move, end, inertiaStart, cancel доступны для обработки всех фаз взаимодействия.

Глобальные слушатели

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

interact.globalEvents.on('dragmove', function (event) {
  console.log('Глобальное движение элемента', event.target);
});

Особенности глобальных слушателей:

• Привязываются к объекту interact.globalEvents.
• Срабатывают для любого элемента, зарегистрированного через Interact.js.
• Поддерживают все события интеракции: dragstart, dragmove, dragend, resizestart, resizemove, resizeend, gesturestart, gesturemove, gestureend.
• Идеальны для глобальной статистики, анализа взаимодействий, или синхронизации нескольких элементов.

Сравнение локальных и глобальных слушателей

Комбинирование локальных и глобальных слушателей

Часто требуется использовать оба типа слушателей одновременно. Локальные слушатели управляют поведением элемента, а глобальные — обеспечивают наблюдение за всей интерактивной системой.

interact('.resizable')
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move (event) {
        let { x, y } = event.target.dataset;

        x = (parseFloat(x) || 0) + event.deltaRect.left;
        y = (parseFloat(y) || 0) + event.deltaRect.top;

        Object.assign(event.target.style, {
          width: `${event.rect.width}px`,
          height: `${event.rect.height}px`,
          transform: `translate(${x}px, ${y}px)`
        });

        event.target.dataset.x = x;
        event.target.dataset.y = y;
      }
    }
  });

interact.globalEvents.on('resizemove', event => {
  console.log('Глобальное событие resize', event.target);
});

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

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

• Для одиночных элементов или элементов с уникальным поведением использовать локальные слушатели.
• Для анализирования всех интеракций или логирования применять глобальные слушатели.
• Стараться не перегружать глобальные слушатели большим количеством вычислений — это может повлиять на производительность.
• Локальные слушатели лучше применять, когда требуется доступ к внутреннему состоянию элемента через event.target.

Глубокое понимание различий между глобальными и локальными слушателями позволяет создавать масштабируемые, отзывчивые и оптимизированные интерфейсы с использованием Interact.js, обеспечивая контроль как на уровне отдельных элементов, так и на уровне всей системы интерактивности.