Базовое введение в обработку событий в Svelte для начинающих
coding web-development javascript tutorial learn-to-code svelte event-handling-in-svelte event-data-in-svelte-events

Базовое введение в обработку событий в 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;


++х;



Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE