# Element

Table of Contents

###### Examples

Basic Usage

###### JavaScript Reference

onEvent
offEvent
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`.