ФреймворкJavaScript

Listeners API: слушатели без утечек

Управление пользовательскими обработчиками DOM-событий с автоматической очисткой.

Как получить экземпляр редактора

Методы ниже вызываются на редакторе, созданном через new Blok(). Они доступны после того, как разрешится editor.isReady.

TypeScript

// You already hold the instance returned by the constructor.
const editor = new Blok({ holder: 'editor' });
await editor.isReady;

// Call any API method on it.
editor.caret.setToLastBlock('end');

Методы

listeners.on(element, eventType, handler, useCapture?)

string | undefined

Subscribe to event on element. Returns listener ID for removal.

Когда использовать

Управляемый addEventListener — Blok отслеживает слушатель и снимает его при destroy(), предотвращая утечки. Сохраните возвращённый id для раннего удаления.

TypeScript

const button = document.querySelector('button');
const listenerId = editor.listeners.on(button, 'click', (e) => {
  console.log('Button clicked');
});

// Store ID for later removal

listeners.off(element, eventType, handler, useCapture?)

void

Unsubscribe from event on element.

Когда использовать

Снимает управляемый слушатель по элементу и обработчику; или используйте offById(), если сохранили id из on().

TypeScript

const handler = (e) => console.log('Clicked');
editor.listeners.on(button, 'click', handler);
editor.listeners.off(button, 'click', handler);

listeners.offById(id)

void

Unsubscribe from event using the listener ID.

Когда использовать

Снимает слушатель по id, возвращённому on() — чище, чем снова сопоставлять элемент и обработчик.

TypeScript

const listenerId = editor.listeners.on(button, 'click', handler);
// Later...
editor.listeners.offById(listenerId);