Удаление обработчиков

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

Метод element.unclick(handler)

Для удаления обработчика клика используется метод unclick. Если обработчик передан как аргумент, удаляется конкретная функция. Если аргумент отсутствует, удаляются все обработчики клика на элементе.

var s = Snap(400, 400);
var circle = s.circle(100, 100, 50);

function onClick() {
    console.log('Клик по кругу');
}

circle.click(onClick);

// Удаление конкретного обработчика
circle.unclick(onClick);

// Удаление всех обработчиков клика
circle.unclick();

Особенности:

  • unclick(handler) удаляет только те функции, которые были зарегистрированы через click.
  • Если элемент имеет несколько обработчиков клика, вызов unclick() без аргумента очищает их все.

Универсальный метод element.unevent(eventName, handler)

Snap.svg позволяет работать с любыми событиями SVG через универсальные методы element.hover, element.mouseover, element.mouseout, element.drag и их удаление через element.unevent. Формат:

element.unevent(eventName, handler);
  • eventName — строка с названием события ('click', 'mouseover', 'mouseout' и т.д.).
  • handler — функция обработчика. Если не передан, удаляются все обработчики для данного события.

Пример удаления обработчика mouseover:

function highlight() {
    this.attr({ fill: 'red' });
}

circle.mouseover(highlight);

// Удаление конкретного обработчика
circle.unevent('mouseover', highlight);

// Удаление всех обработчиков mouseover
circle.unevent('mouseover');

Удаление обработчиков drag

Для элементов с поддержкой drag, Snap.svg хранит функции для начала, перемещения и окончания перетаскивания. Метод element.undrag() снимает привязку всех drag-функций с элемента.

function start() { console.log('Начало перетаскивания'); }
function move(dx, dy) { this.attr({ cx: this.attr('cx') + dx, cy: this.attr('cy') + dy }); }
function end() { console.log('Окончание перетаскивания'); }

circle.drag(move, start, end);

// Удаление всех drag обработчиков
circle.undrag();

Важно:

  • После вызова undrag() элемент перестает реагировать на перетаскивание.
  • Snap.svg не предоставляет встроенного способа удаления отдельных функций drag; удаляются все три одновременно.

Совместная работа с динамическими элементами

При создании элементов в циклах или в динамических интерфейсах важно корректно удалять обработчики, чтобы не накапливались «висящие» функции. Для этого рекомендуется:

  1. Хранить ссылки на все обработчики.
  2. Использовать unclick и unevent перед удалением элемента из DOM.
  3. Для drag элементов применять undrag().
var rect = s.rect(50, 50, 80, 40);
function onRectClick() { console.log('Клик по прямоугольнику'); }

rect.click(onRectClick);

// Динамическое удаление элемента с очисткой обработчиков
rect.unclick(onRectClick);
rect.remove();

Взаимодействие с группами (<g>)

Если обработчики назначены группе элементов (g), их удаление работает аналогично:

var group = s.group(circle, rect);

function onGroupClick() { console.log('Клик по группе'); }

group.click(onGroupClick);

// Удаление обработчика группы
group.unclick(onGroupClick);

При этом обработчики дочерних элементов остаются неизменными. Для полного удаления событий необходимо пройтись по каждому элементу группы и вызвать unclick, unevent или undrag отдельно.

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

  • Явное хранение функций: всегда сохранять ссылку на обработчик для возможности удаления.
  • Очистка при удалении: перед вызовом element.remove() удалять все обработчики.
  • Группы и сложные элементы: при работе с группами и сложными сценами проверять, что события удаляются у нужного уровня (группа или отдельный элемент).
  • Drag и hover: удаление drag всегда полное (undrag), hover и другие события требуют unevent с указанием типа события.

Эти методы обеспечивают стабильность интерактивных SVG-приложений, предотвращают утечки памяти и позволяют полностью контролировать события на элементах Snap.svg.

Оглавление