Отмена и предотвращение событий

В Slim.js управление событиями реализуется через стандартный механизм DOM-событий, но с упрощённым синтаксисом и тесной интеграцией с компонентами. Правильное управление событиями включает не только их обработку, но и возможность отмены стандартного поведения и предотвращения дальнейшего распространения события.

Свойства событий: `preventDefault` и `stopPropagation`

Каждое DOM-событие предоставляет два ключевых метода:

preventDefault() — предотвращает стандартное действие браузера, связанное с событием. Например, при клике на ссылку браузер не перейдёт по адресу, если вызвать этот метод.
stopPropagation() — останавливает дальнейшее распространение события вверх по дереву DOM. Полезно, когда необходимо локально обработать событие, не затрагивая родительские элементы.

В Slim.js эти методы используются точно так же, как в нативном Jav * aScript:

class ButtonComponent extends Slim {
  get template() {
    return `<button @click="handleClick">Нажми меня</button>`;
  }

  handleClick(event) {
    event.preventDefault();
    event.stopPropagation();
    console.log('Событие обработано, стандартное действие предотвращено');
  }
}

customElements.define('button-component', ButtonComponent);

Здесь @click="handleClick" — синтаксис Slim.js для привязки события к методу компонента.

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

Slim.js поддерживает делегирование событий, что позволяет подписываться на события родительского элемента и обрабатывать события дочерних элементов без установки обработчиков на каждый элемент.

class ListComponent extends Slim {
  get template() {
    return `
      <ul @click="handleClick">
        <li data-id="1">Элемент 1</li>
        <li data-id="2">Элемент 2</li>
      </ul>
    `;
  }

  handleClick(event) {
    if (event.target.tagName === 'LI') {
      event.preventDefault();
      console.log('Выбран элемент с ID:', event.target.dataset.id);
    }
  }
}

customElements.define('list-component', ListComponent);

Преимущества делегирования:

Меньше обработчиков в DOM.
Автоматическая обработка динамически добавленных элементов.
Централизованное управление логикой событий.

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

Slim.js позволяет создавать собственные события и управлять ими через CustomEvent. Это особенно полезно для связи между компонентами без прямого доступа к DOM родителя.

class ChildComponent extends Slim {
  get template() {
    return `<button @click="notifyParent">Отправить событие</button>`;
  }

  notifyParent() {
    this.dispatchEvent(new CustomEvent('child-action', {
      bubbles: true,
      cancelable: true,
      detail: { message: 'Данные от дочернего компонента' }
    }));
  }
}

class ParentComponent extends Slim {
  get template() {
    return `<child-component @child-action="handleChildAction"></child-component>`;
  }

  handleChildAction(event) {
    console.log('Получены данные:', event.detail.message);
    event.preventDefault(); // предотвращаем действие по умолчанию, если нужно
  }
}

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

Ключевой момент — bubbles: true позволяет событию всплывать до родителя, а cancelable: true делает возможным вызов preventDefault().

Отмена событий ввода и клавиатуры

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

class InputComponent extends Slim {
  get template() {
    return `<input @keydown="handleKeydown" placeholder="Введите текст">`;
  }

  handleKeydown(event) {
    if (event.key === 'Enter') {
      event.preventDefault(); // блокируем отправку формы
      console.log('Enter перехвачен, форма не отправлена');
    }
  }
}

customElements.define('input-component', InputComponent);

Особенности работы:

keydown и keypress позволяют отменять ввод до появления символа.
keyup с preventDefault() не отменяет ввод, так как событие уже произошло.
Для форм важно отслеживать submit и использовать preventDefault(), чтобы контролировать поведение.

Глобальная отмена событий

Иногда требуется предотвратить стандартное поведение для множества элементов одновременно:

document.addEventListener('click', event => {
  if (event.target.matches('a.prevent-link')) {
    event.preventDefault();
    console.log('Все ссылки с классом prevent-link заблокированы');
  }
});

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