@nent/core/dist/collection/components/n-views/services/elements.js

Functional elements to add routing, data-binding, dynamic HTML, declarative actions, audio, video, and so much more. Supercharge static HTML files into web apps without script or builds.

/*!
 * NENT 2022
 */
/* istanbul ignore file */
/**
 * It attaches an event handler to all elements matching a query selector, but only once per element
 * @param {HTMLElement} rootElement - The root element to search for the query.
 * @param {string} query - The query to find the elements.
 * @param {string} event - The event name, such as "click" or "mouseover".
 * @param eventHandler - (el: TElement, ev: TEvent) => void
 */
export function captureElementsEventOnce(rootElement, query, event, eventHandler) {
  const attribute = `n-attached-${event}`;
  Array.from(rootElement.querySelectorAll(query) || [])
    .map(el => el)
    .filter(el => !el.hasAttribute(attribute))
    .forEach((el) => {
    el.addEventListener(event, ev => {
      eventHandler(el, ev);
    });
    el.setAttribute(attribute, '');
  });
}