Elevent

Create callback functions for any EventTarget dispatched on HTML elements.

import { Elevent } from "https://cdn.jsdelivr.net/npm/elevent/src/Elevent.mjs"

new Elevent("click", document.querySelector("#myButton"), () => console.log("Button clicked!")); // console: "Button clicked"

Examples

Bind from an HTMLCollection

new Elevent("click", document.querySelectorAll("button"), (event) => console.log(event)); // console: PointerEvent

Bind with a CSS selector

// Bind all elements that match the CSS selector string
new Elevent("click", ".css-selector", (event, elevent) => console.log(event, elevent)) // console: PointerEvent, Elevent

New elements added to the DOM with a matching CSS selector will bind automatically

Remove event listeners

const elevent = new Elevent("click", null, () => {}); // Empty Elevent instance

elevent.remove(document.querySelector("#specialButton")); // Remove a specific HTMLElement if bound
elevent.remove(); // Remove ALL currently bound elements

Bind a specific element

const elevent = new Elevent("click", null, () => {}); // Empty Elevent instance

elevent.bind(document.querySelector("#bindMe"));

Description

Elevent.constructor

Elevent.constructor(
    eventType: string | null
    target: HTMLCollection | HTMLElement | string | null,
    callback: CallableFunction
)

this.bind()

this.bind(
    target: HTMLElement
)

this.remove()

this.remove(
    target?: HTMLElement
)