Базовое введение в обработку событий в Svelte для начинающих
16 мая 2022 г.События в Svelte интуитивно понятны и просты в использовании. В этом руководстве мы рассмотрим, как начать работу с событиями Svelte.
Предполагается, что вы хорошо понимаете Javascript для этого руководства. Если вы новичок в Svelte, возможно, имеет смысл прочитать мое руководство по [созданию вашего первого приложения Svelte] (https://fjolt.com/article/svelte-creating-your-first-app) перед тем, как начать.
Что такое события в Svelte?
Когда мы создаем новые компоненты в Svelte, мы обычно хотим, чтобы они выполняли определенные действия, когда пользователи взаимодействуют с ними, например, наводили на них курсор или нажимали на них. Svelte поддерживает все события, которые вы обычно найдете в Vanilla Javascript.
Начнем с базового примера. Компонент ниже создает простой счетчик:
```javascript
<скрипт>
// мы пишем экспорт, чтобы сказать, что это свойство
// это означает, что мы можем изменить его позже!
пусть х = 0;
константа addToCounter = функция () {
++х;
Каждый раз, когда пользователь нажимает на кнопку, мы хотим, чтобы срабатывал addToCounter, который будет увеличивать x на 1 и отображать его внутри самой кнопки. Для этого мы добавим событие.
Вот событие, которое нам нужно добавить, когда пользователь нажимает кнопку:
```javascript
Мы используем {} в Svelte, чтобы указать, что значением этого свойства является Javascript. Вместо клика можно использовать любое допустимое событие Javascript.
Например, приведенный ниже пример будет увеличивать счетчик каждый раз, когда мышь перемещается по «кнопке»:
```javascript
Точно так же вы можете использовать другие события Javascript, такие как щелчок, прокрутка, hover, mouseup, pointerup, pointerdown, mousedown и т. д. Это всего лишь примеры, но любое событие Javascript, которое вы хотите использовать можно использовать.
Как получить доступ к данным событий в Svelte Events?
Иногда мы хотим получить доступ к данным e или event, когда пользователь взаимодействует с нашим компонентом. Объект «event» содержит много полезной информации об инициированном событии. Для этого нам просто нужно превратить наш обработчик в функцию.
Например, давайте получим позицию щелчка кнопки и на этот раз отобразим ее пользователю.
```javascript
<скрипт>
// мы пишем экспорт, чтобы сказать, что это свойство
// это означает, что мы можем изменить его позже!
пусть х = 0;
пусть нажмите = [0, 0]
константа addToCounter = функция (е) {
клик[0] = e.clientX;
клик[1] = e.clientY;
++х;
Нажато {x} раз, последний раз: {click[0]}, {click[1]}
Здесь мы сохраняем e.clientX и e.clientY в переменной и отображаем ее пользователю каждый раз, когда нажимается кнопка.
Для тех, кто не знает, e.clientX и e.clientY оба относятся к аспекту положения курсора, когда событие было запущено.
Svelte по своей природе реактивен, поэтому кнопка будет автоматически обновляться с последними данными при каждом нажатии.
Svelte Переадресация событий
Переадресация событий происходит всякий раз, когда пользователь инициирует событие в дочернем компоненте, которое мы хотим обработать в родительском компоненте. По сути, это говорит о том, что этот компонент может иметь определенное событие, но здесь оно не обрабатывается.
Глядя на наш предыдущий пример, мы можем сначала настроить пересылку событий, настроив события, которые можно пересылать в дочернем компоненте.
Допустим, мы создаем компонент в файле с именем Comp.svelte, который выглядит так, как показано ниже. Одна кнопка нажимается, а другая нет.
```javascript
<кнопка на:щелчок>
Нажмите на меня, я кнопка
<кнопка>
Я некликабельный. Игнорируй меня.
Здесь мы говорим, что первая кнопка имеет действительное событие on:click. Это полезно, поскольку позволяет нам определять определенные элементы внутри компонента с действительными событиями, которые можно пересылать вверх. Таким образом, в родительском элементе мы можем импортировать нашу кнопку следующим образом:
```javascript
<скрипт>
импортировать Comp из './Comp.svelte';
пусть х = 0;
константа addToCounter = () => {
++х;
Теперь, когда пользователь нажимает первую «кнопку» в «Comp», он запускает событие «on: click» и запускает функцию «addToCounter». Если бы мы полностью удалили on:click из Comp.svelte, то никакое событие не срабатывало бы, несмотря на определение on:click в нашем компоненте Comp.
Это означает, что мы можем не только определить, что к дочернему компоненту должно быть прикреплено событие, но мы также можем определить, какие конкретные элементы имеют это событие, добавив его к самому дочернему компоненту. Это дает нам большую гибкость.
Последние мысли
События Svelte просты в использовании, а тот факт, что они следуют тем же соглашениям об именах, что и события Vanilla Javascript, делает их невероятно простыми в использовании.
В этом руководстве мы рассмотрели основы, чтобы вы могли приступить к работе.
Также опубликовано [Здесь] (https://fjolt.com/article/svelte-how-events-work)
Чтобы узнать больше о Svelte, ознакомьтесь с другими моими статьями здесь
Оригинал