Всплытие событий в группах

В Two.js объекты сцены могут быть организованы в группы, что позволяет управлять множеством фигур как единым целым. Каждая группа, как и отдельные элементы (Two.Path, Two.Rectangle, Two.Circle и др.), поддерживает подписку на события. Это делает возможным отслеживание кликов, наведения мыши, изменения состояния объектов и других пользовательских взаимодействий.

Событийная модель

Two.js использует простую событийную модель, основанную на методах bind и unbind. Основные принципы работы событий в группах:

  • Наследование событий: Когда событие срабатывает на дочернем объекте, оно может быть перехвачено родительской группой.
  • Всплытие событий: События распространяются по иерархии группы снизу вверх, что позволяет группе реагировать на события дочерних элементов.
  • Остановка всплытия: Используется метод event.stopPropagation() для предотвращения дальнейшего распространения события вверх по иерархии.

Пример подписки на событие для группы:

var group = two.makeGroup([rect, circle]);

group.bind('mouseover', function(event) {
  console.log('Курсор над группой');
});

rect.bind('click', function(event) {
  console.log('Нажатие на прямоугольник');
});

В этом примере событие click на прямоугольнике не автоматически всплывает на группу, но событие mouseover можно отслеживать как на дочерних элементах, так и на всей группе.

Всплытие событий в группах

В Two.js всплытие событий работает аналогично DOM-модели, но с особенностями, связанными с визуальными элементами:

  1. Событие инициируется на конкретном элементе. Например, при клике мыши на круге событие click возникает на этом круге.
  2. Если событие не остановлено, оно поднимается к родительской группе. Родитель может подписаться на то же событие.
  3. Все уровни иерархии получают событие последовательно. Это полезно для реализации сложной логики взаимодействия с группами.

Пример организации всплытия:

var parentGroup = two.makeGroup();
var childGroup = two.makeGroup([circle, rect]);

parentGroup.add(childGroup);

childGroup.bind('click', function(event) {
  console.log('Нажатие на дочернюю группу');
  // event.stopPropagation(); // Прекращает всплытие
});

parentGroup.bind('click', function(event) {
  console.log('Нажатие на родительскую группу');
});

Если не использовать stopPropagation, при клике на элемент дочерней группы вывод будет следующим:

Нажатие на дочернюю группу
Нажатие на родительскую группу

Обработка событий на уровне отдельного элемента и группы

Two.js позволяет назначать разные обработчики на один и тот же тип события, но на разных уровнях иерархии. Это дает гибкость:

  • Элемент внутри группы может реагировать индивидуально.
  • Группа может обрабатывать общие действия всех дочерних элементов.
  • Можно комбинировать глобальные и локальные действия, например, изменение цвета всех объектов группы при наведении на любой из элементов.
childGroup.bind('mouseover', function(event) {
  this.children.forEach(function(item) {
    item.fill = '#ff0000'; // Подсветка всех элементов
  });
});

parentGroup.bind('mouseout', function(event) {
  parentGroup.children.forEach(function(child) {
    child.children.forEach(function(item) {
      item.fill = '#0000ff'; // Сброс цвета
    });
  });
});

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

  • Использовать stopPropagation для управления уровнем обработки события.
  • Подписывать группы на события только тогда, когда необходимо. Избыточные подписки могут замедлять рендеринг.
  • Организовывать элементы в логические группы, чтобы управлять поведением сложных сцен.
  • Комбинировать события с анимацией, чтобы визуальные эффекты реагировали на пользовательские действия без необходимости отдельно отслеживать каждый элемент.

Важные моменты

  • Не все события автоматически всплывают. Например, click, mouseover и mouseout можно настроить для всплытия через кастомные обработчики.
  • Иерархия групп играет ключевую роль. Событие всегда поднимается вверх по структуре Group -> Parent Group -> Scene.
  • Two.js сохраняет ссылку на event.target, что позволяет точно определить, на каком элементе произошло событие, даже при всплытии.

В результате, правильно организованная иерархия групп и грамотная работа с методами bind, unbind и stopPropagation обеспечивает гибкое управление событиями, позволяя создавать сложные интерактивные сцены в Two.js.

Оглавление