События и обработчики событий

В Carbon Components Svelte события играют ключевую роль при взаимодействии компонентов с приложением. Библиотека предоставляет набор готовых компонентов, каждый из которых поддерживает стандартные DOM-события, а также собственные, специфические для компонента. Обработка событий позволяет реализовать динамическое поведение интерфейса и реакцию на действия пользователя.

Стандартные события DOM

Каждый компонент Svelte, включая Carbon Components, наследует стандартные события DOM: click, input, focus, blur и другие. Их обработка происходит через синтаксис Svelte:

<Button on:click={handleClick}>
  Нажми меня
</Button>

<script>
  function handleClick(event) {
    console.log('Кнопка была нажата', event);
  }
</script>

Ключевой момент: объект события (event) всегда доступен и содержит стандартные свойства, такие как target, currentTarget, type, preventDefault() и stopPropagation().

События компонентов Carbon

Carbon Components Svelte расширяет стандартный набор событий компонентами, специфичными для конкретного элемента интерфейса. Например, компонент TextInput поддерживает события:

  • input — срабатывает при изменении значения текстового поля.
  • change — срабатывает при завершении изменения (обычно при потере фокуса).
  • invalid — срабатывает при валидации формы и несоответствии значения требованиям.

Пример использования:

<TextInput
  labelText="Имя пользователя"
  on:input={handleInput}
  on:change={handleChange}
/>

<script>
  function handleInput(event) {
    console.log('Изменение текста:', event.target.value);
  }

  function handleChange(event) {
    console.log('Завершено редактирование:', event.target.value);
  }
</script>

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

Многие Carbon-компоненты генерируют кастомные события с особыми данными. Например, компонент Dropdown использует событие select для передачи выбранного значения:

<Dropdown
  items={['Первый', 'Второй', 'Третий']}
  on:select={handleSelect}
/>

<script>
  function handleSelect(event) {
    console.log('Выбран элемент:', event.detail.selectedItem);
  }
</script>

Особенность: данные пользовательского события содержатся в свойстве event.detail. Оно может включать любую информацию, которую компонент решает передать при срабатывании события.

Делегирование событий

При работе со сложными интерфейсами рекомендуется использовать делегирование событий. Svelte поддерживает этот подход через обычные обработчики на родительских контейнерах:

<div on:click={handleParentClick}>
  <Button id="btn1">Кнопка 1</Button>
  <Button id="btn2">Кнопка 2</Button>
</div>

<script>
  function handleParentClick(event) {
    const targetId = event.target.id;
    console.log('Нажата кнопка с ID:', targetId);
  }
</script>

Преимущество: уменьшается количество обработчиков и упрощается управление событиями в больших интерфейсах.

Модификация поведения событий

Carbon Components Svelte позволяет использовать стандартные методы для контроля поведения событий:

  • event.preventDefault() — предотвращает стандартное действие браузера.
  • event.stopPropagation() — предотвращает всплытие события.

Пример с чекбоксом:

<Checkbox
  labelText="Принять условия"
  on:click={handleClick}
/>

<script>
  function handleClick(event) {
    event.preventDefault();
    console.log('Нажатие обработано, стандартное действие отменено');
  }
</script>

События для динамически создаваемых компонентов

При генерации компонентов через {#each} необходимо помнить, что каждый экземпляр компонента создает собственные события. Использование привязки к функции-обработчику обеспечивает корректное получение данных для каждого элемента:

{#each items as item}
  <Button on:click={() => handleItemClick(item)}>
    {item.name}
  </Button>
{/each}

<script>
  function handleItemClick(item) {
    console.log('Нажат элемент:', item.name);
  }
</script>

Практические рекомендации

  • Всегда проверять документацию на наличие специфичных событий для компонента.
  • Использовать event.detail для получения данных из кастомных событий.
  • Для больших интерфейсов применять делегирование событий.
  • Контролировать поведение через preventDefault и stopPropagation только при необходимости.
  • При работе с формами проверять, какие события срабатывают на изменение, а какие — на потерю фокуса, чтобы избежать дублирования логики.

События и обработчики в Carbon Components Svelte обеспечивают гибкую реакцию интерфейса на действия пользователя. Понимание стандартных и кастомных событий, методов их обработки и делегирования позволяет создавать отзывчивые, масштабируемые и управляемые интерфейсы.

Оглавление