Создание и диспетчеризация пользовательских событий

Фреймворк Lit обеспечивает лёгкий и эффективный способ работы с веб-компонентами, включая создание и обработку пользовательских событий. Пользовательские события позволяют компонентам взаимодействовать между собой, передавая данные и сигналы без жёсткой привязки к конкретной структуре DOM.

Определение и создание событий

Для генерации пользовательских событий используется стандартный объект CustomEvent. Основные параметры при создании события:

type — имя события, по которому будет производиться подписка;
detail — объект с дополнительными данными, передаваемый слушателю события;
bubbles — булевое значение, указывающее, распространяется ли событие вверх по DOM;
composed — булевое значение, позволяющее событию проходить через shadow DOM.

Пример создания события внутри Lit-компонента:

import { LitElement, html } from 'lit';

class MyComponent extends LitElement {
  _dispatchCustomEvent() {
    const event = new CustomEvent('my-event', {
      detail: { value: 42 },
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(event);
  }

  render() {
    return html`<button @click=${this._dispatchCustomEvent}>Отправить событие</button>`;
  }
}

customElements.define('my-component', MyComponent);

Ключевые моменты:

Использование bubbles: true позволяет событию подниматься к родительским элементам;
composed: true важно, если компонент находится в shadow DOM, иначе событие не выйдет за его пределы;
Объект detail предоставляет удобный способ передачи данных слушателю.

Подписка на пользовательские события

Подписка на события может быть реализована как внутри DOM, так и с использованием шаблонных привязок Lit.

Пример прослушивания события родительским компонентом:

class ParentComponent extends LitElement {
  _handleEvent(e) {
    console.log('Получено событие с данными:', e.detail.value);
  }

  render() {
    return html`<my-component @my-event=${this._handleEvent}></my-component>`;
  }
}

customElements.define('parent-component', ParentComponent);

Особенности:

Атрибут @имя_события привязывает обработчик к событию;
События с bubbles: true могут быть перехвачены на любом уровне DOM выше по иерархии;
Можно использовать стандартный метод addEventListener для подписки динамически.

Передача данных через события

События в Lit часто используются для передачи данных от дочернего компонента к родительскому. Это позволяет строить однонаправленный поток данных, минимизируя необходимость прямого взаимодействия с DOM.

Пример передачи сложного объекта:

const event = new CustomEvent('update-user', {
  detail: { id: 123, name: 'Иван', role: 'admin' },
  bubbles: true,
  composed: true
});
this.dispatchEvent(event);

Родительский компонент может получить полный объект через e.detail, что упрощает управление состоянием и логику приложения.

Динамическая диспетчеризация и повторное использование

Для компонентов, которые часто создают события с разными типами или деталями, рекомендуется использовать вспомогательные методы для генерации событий:

_dispatchEvent(type, detail = {}) {
  this.dispatchEvent(new CustomEvent(type, {
    detail,
    bubbles: true,
    composed: true
  }));
}

// Использование
this._dispatchEvent('item-selected', { id: 10 });
this._dispatchEvent('item-deleted', { id: 10 });

Преимущества такого подхода:

Унификация создания событий;
Минимизация дублирования кода;
Лёгкость модификации поведения событий.

События с отменой действия

Если требуется, чтобы слушатели могли отменить стандартное поведение события, используется свойство cancelable:

const event = new CustomEvent('confirm-action', {
  detail: { value: true },
  bubbles: true,
  composed: true,
  cancelable: true
});

if (!this.dispatchEvent(event)) {
  console.log('Действие было отменено');
}

Метод dispatchEvent возвращает false, если кто-либо вызвал event.preventDefault();
Это позволяет реализовать гибкую систему обратной связи между компонентами.

Взаимодействие с Shadow DOM

Lit активно использует shadow DOM для инкапсуляции стилей и структуры. Чтобы события корректно распространялись через границы shadow DOM:

Устанавливается composed: true при создании события;
Подписчики вне shadow DOM смогут перехватывать события без дополнительных трюков.

Пример:

this.dispatchEvent(new CustomEvent('shadow-event', {
  detail: { info: 'данные' },
  bubbles: true,
  composed: true
}));