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

В SVG.js любая графическая сущность является объектом, поддерживающим систему событий, схожую с DOM-событиями. События позволяют реагировать на действия пользователя, такие как клики, наведение мыши, перемещение и отпускание кнопки мыши. Основные методы для работы с событиями:

  • on(event, handler) — привязка обработчика к событию.
  • off(event, handler) — удаление конкретного обработчика.
  • click(handler), mouseover(handler), mouseout(handler) — сокращённые методы для часто используемых событий.

Пример привязки события клика к элементу:

const draw = SVG().addTo('body').size(400, 400);
const circle = draw.circle(100).fill('blue');

circle.on('click', function(event) {
    this.fill('red');
});

Здесь при клике на круг его заливка изменяется на красную. Обработчик получает объект события, идентичный стандартному MouseEvent.

Всплытие событий

SVG.js наследует механизм всплытия событий от DOM. Событие сначала возникает на самом элементе, на котором произошло действие, а затем поднимается вверх по иерархии контейнеров, пока не достигнет корня SVG или пока не будет остановлено.

Пример всплытия:

const group = draw.group();
const rect = group.rect(100, 100).fill('green');

group.on('click', () => console.log('Group clicked'));
rect.on('click', () => console.log('Rectangle clicked'));

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

Rectangle clicked
Group clicked

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

Остановка всплытия

Иногда необходимо предотвратить всплытие, чтобы обработчик срабатывал только на конкретном элементе. Для этого используется метод stopPropagation() объекта события.

rect.on('click', function(event) {
    console.log('Rectangle clicked only');
    event.stopPropagation();
});

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

Перехват событий

SVG.js поддерживает возможность перехвата событий через объект события, предоставляя доступ к координатам, кнопкам мыши и целевому элементу. Основные свойства объекта события:

  • event.target — элемент, на котором произошло событие.
  • event.type — тип события (click, mousemove, mousedown и т.д.).
  • event.offsetX, event.offsetY — координаты события относительно элемента SVG.
  • event.stopPropagation() — остановка всплытия.
  • event.preventDefault() — предотвращение стандартного поведения браузера.

Пример перехвата координат:

draw.on('mousemove', function(event) {
    console.log(`Mouse at x=${event.offsetX}, y=${event.offsetY}`);
});

Делегирование событий

SVG.js позволяет реализовать делегирование событий, аналогичное DOM: событие можно отслеживать на контейнере, определяя, какой вложенный элемент его вызвал. Это особенно полезно при динамическом создании элементов.

group.on('click', function(event) {
    if(event.target.instance instanceof SVG.Rect) {
        event.target.instance.fill('orange');
    }
});

Здесь группа перехватывает клики всех прямоугольников, и при нажатии цвет конкретного прямоугольника меняется на оранжевый.

События мыши и касания

SVG.js поддерживает широкий спектр событий мыши и сенсорных устройств:

  • mousedown, mouseup, mousemove, mouseenter, mouseleave
  • touchstart, touchend, touchmove

Можно объединять обработчики, например, для перетаскивания:

circle.draggable().on('dragmove', function(event) {
    console.log(`Circle moved to x=${this.x()}, y=${this.y()}`);
});

Метод draggable() подключает встроенные события для простого управления перемещением элемента.

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

  • Всегда использовать stopPropagation(), если всплытие мешает логике интерфейса.
  • Для динамически добавляемых элементов удобнее использовать делегирование на родительской группе.
  • Проверять event.target.instance, чтобы точно определить тип SVG-элемента.
  • Использовать сокращённые методы (click, mouseover) для читаемого и компактного кода.

Механизм всплытия и перехвата в SVG.js полностью совместим с DOM, что делает его гибким инструментом для интерактивной графики и визуализации данных.

Оглавление