Element

Table of Contents

Description

The Element utility provides functions to handle DOM events, check element visibility, and manipulate element properties.


Basic Usage

import { onEvent, offEvent, dispatchEvent, isInView, firstFocusable, setProp } from '../src/utils/element.js';

// Add event listener
onEvent(document.getElementById('myElement'), 'click', () => console.log('Clicked'));

// Remove event listener
offEvent(document.getElementById('myElement'), 'click', () => console.log('Clicked'));

// Dispatch event
dispatchEvent(document.getElementById('myElement'), 'customEvent', { detail: 'example' });

// Check if element is in view
isInView(document.getElementById('myElement')).then(inView => console.log(inView));

// Get first focusable element
const firstFocusableElement = firstFocusable(document.getElementById('myContainer'));
console.log(firstFocusableElement);

// Set property on element
setProp(document.getElementById('myElement'), 'innerText', 'New Text');

JavaScript Reference


onEvent

onEvent(element EventTarget | NodeList | Array | string, events string, handler function, scope Document)
Parameters
element: EventTarget | NodeList | Array | string

The element(s) to attach the event listener to.

events: string

The event(s) to listen for, separated by spaces.

handler: function

The function to call when the event is triggered.

scope: Document

The scope to query for elements if a string selector is provided. Default is document.


offEvent

offEvent(element EventTarget | NodeList | Array | string, events string, handler function, scope Document)
Parameters
element: EventTarget | NodeList | Array | string

The element(s) to remove the event listener from.

events: string

The event(s) to stop listening for, separated by spaces.

handler: function

The function to remove from the event listener.

scope: Document

The scope to query for elements if a string selector is provided. Default is document.


dispatchEvent

dispatchEvent(element EventTarget | NodeList | Array | string, events string, detail any, options object)
Parameters
element: EventTarget | NodeList | Array | string

The element(s) to dispatch the event on.

events: string

The event(s) to dispatch, separated by spaces.

detail: any

The detail to include in the event.

options: object

Additional options for the event. Default is { scope: document, bubbles: false }.


isInView

isInView(element HTMLElement)
Parameters
element: HTMLElement

The element to check for visibility.

Returns

A promise that resolves to true if the element is in view, and false otherwise.


firstFocusable

firstFocusable(scope HTMLElement)
Parameters
scope: HTMLElement

The scope to query for focusable elements.

Returns

The first focusable element within the scope.


setProp

setProp(element HTMLElement | NodeList | Array | string, prop string, value any, scope Document)
Parameters
element: HTMLElement | NodeList | Array | string

The element(s) to set the property on.

prop: string

The property to set.

value: any

The value to set the property to.

scope: Document

The scope to query for elements if a string selector is provided. Default is document.