Table of Contents
Examples
Basic UsageJavaScript Reference
onEventoffEvent
dispatchEvent
isInView
firstFocusable
setProp
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
.