Skip to content
FrameworkJavaScript

Listeners API: leak-free DOM listeners

Manage custom DOM event listeners with automatic cleanup.

Last updated Sep 8, 2026Edit this page on GitHub

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

A managed addEventListener. Blok tracks the listener and removes it on destroy(), which prevents 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

Removes a managed listener by element and handler. If you kept the id from on(), use offById() instead.

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

Removes a listener using the id on() returned. That is cleaner than matching element and handler again.

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