Работа с событиями в Svelte

Узнайте, как работать с событиями в Svelte

Прослушивание событий DOM

В Svelte вы можете определить слушателя для события DOM прямо в шаблоне, используяon:<event>синтаксис.

Например, чтобы послушатьclickсобытие, вы передадите функцию вon:clickатрибут.

Чтобы послушатьonmousemoveсобытие, вы передадите функцию вon:mousemoveатрибут.

Вот пример с встроенной функцией обработки:

<button on:click={() => {
  alert('clicked')
}}>Click me</button>

а вот еще один пример с функцией обработки, определенной вscriptраздел компонента:

<script>
const doSomething = () => {
  alert('clicked')
}
</script>
<button on:click={doSomething}>Click me</button>

Я предпочитаю встроенный, когда код не слишком подробный. Например, если это всего 2-3 строки, в противном случае я бы переместил это в раздел сценария.

Svelte передает обработчик событий в качестве аргумента функции, что удобно, если вам нужно остановить распространение или сослаться на что-то вОбъект события:

<script>
const doSomething = event => {
  console.log(event)
  alert('clicked')
}
</script>
<button on:click={doSomething}>Click me</button>

Теперь я упомянул «остановить распространение». Это очень распространенная вещь, например, чтобы остановить события отправки формы. Svelte предоставляет наммодификаторы, способ применить его напрямую, не делая этого вручную.stopPropagationиpreventDefaultя думаю, это 2 модификатора, которые вы будете использовать чаще всего.

Вы применяете такой модификатор:<button on:click|stopPropagation|preventDefault={doSomething}>Click me</button>

Есть и другие модификаторы, более нишевые.captureпозволяетзахват событий вместо пузыря,onceзапускает событие только один раз,selfзапускает событие только в том случае, если целью события является этот объект (удаляя его из иерархии восходящей / захватывающей цепочки).

Создание ваших событий в компонентах

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

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

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
</script>

Как только мы это сделаем, мы сможем вызватьdispatch()функция, передавая строку, которая идентифицирует событие (которое мы будем использовать дляon:синтаксис в других компонентах, которые его используют):

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
//when it’s time to trigger the event
  dispatch(‘eventName’)
</script>

Теперь другие компоненты могут использовать наши, используя

<ComponentName on:eventName={event => {
  //do something
}} />

Вы также можете передать объект событию, передав второй параметр вdispatch():

<script>
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()
  const value = 'something'
//when it’s time to trigger the event
  dispatch(‘eventName’, value)
//or

dispatch(‘eventName’, {
someProperty: value
})
</script>

объект прошел мимоdispatch()доступно наeventобъект какevent.detail.

Скачать мою бесплатнуюСправочник Svelte

Работа с событиями в Svelte

Узнайте, как работать с событиями в Svelte

Прослушивание событий DOM

Создание ваших событий в компонентах

Более стройные уроки: