---
title: "Blok Listeners API — managed DOM listeners"
description: "Attach DOM listeners that Blok removes for you when the editor is destroyed, so a tool cannot leak."
source: https://blokeditor.com/docs/listeners-api/
lastmod: 2026-09-07
---

Framework JavaScript

Extending & system Listeners

On this page listeners.on(element, eventType, handler, useCapture?)

# Listeners API: leak-free DOM listeners

Manage custom DOM event listeners with automatic cleanup.

[Edit this page on GitHub](https://github.com/JackUait/blok/blob/main/docs/src/components/api/api-data.ts)

### 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);
```