FrameworkJavaScript

Listeners API: leak-free DOM listeners

Manage custom DOM event listeners with automatic cleanup.

Reaching the editor instance

The methods below run on the editor you created with new Blok(). They are available once editor.isReady resolves.

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');

Methods

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

string | undefined

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

When to use

Managed addEventListener — Blok tracks the listener and removes it on destroy(), preventing leaks. Keep the returned id to remove it early.

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.

When to use

Remove a managed listener by element + handler; or use offById() if you kept the id from 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.

When to use

Remove a listener using the id on() returned — cleaner than matching element + handler again.

TypeScript

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