@hoge1e3/dom-mutable-events

@hoge1e3/dom-mutable-events is a utility class for managing DOM event listeners. It allows you to add, remove, copy, and overwrite event listeners while internally tracking them for precise manipulation.

Features

• Track added event listeners using a Symbol property on the element
• Remove individual or all event listeners by type
• Copy event listeners between elements
• Overwrite existing listeners on an element with those from another element

Installation

npm install @hoge1e3/dom-mutable-events

Usage

import EventManager from '@hoge1e3/dom-mutable-events';

const manager = new EventManager();
const button1 = document.getElementById('button1');
const button2 = document.getElementById('button2');

function onClick(e) {
  console.log('Clicked!', e);
}

manager.add(button1, 'click', onClick);
manager.copy(button2, button1);
// Now button2 also has the click event

manager.remove(button1, 'click', onClick);

API

add(target, type, listener, options)

Adds an event listener and tracks it internally.

remove(target, type?, listener?, options?)

Removes specified or all listeners of a given type.

copy(toEl, fromEl, type?)

Copies listeners from one element to another.

overwrite(toEl, fromEl, type?)

Removes listeners from toEl and then copies from fromEl.

License

MIT