Svelte — события и отличие от JS

Admin Svelte

В реактивном фреймворке Svelte не придется использовать addEventListener. Во-первых он не будет срабатывать, потому что многие элементы на странице создаются после её загрузки, а затем еще и меняются в процессе. А во-вторых в этом нет необходимости.

Альтернатива addEventListener

Тем не менее addEventListener можно использовать, ведь Svelte это обычный JS. И даже можно будет некоторые элементы найти, если поместить его внутрь функции onMount.

<script>
import {onMount} from "svelte";
onMount(async () => {
    document.addEventListener();
});
</script>

Отказ от addEventListener только добавит плюсы. Больше не нужно искать элементы по getElementById, querySelector или querySelectorAll, а потом обрабатывать каждый forEach. Не надо будет также делать проверки, тот ли выбран элемент или нет. И т.д. Все это экономит время — не нужно писать лишний код.

Всё это заменяет добавление событий непосредственно на элемент в нужном месте html.

Например, мы добавляем разного рода события на элемент div:

<div
    class="cell description edit"
    contenteditable="true"
    bind:innerHTML="{budget.description}"
    on:input="{saveUsersData(budget)}"
    on:paste="{handlePaste}"
    on:keydown="{handleKeydown}"
></div>

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

Событие on:input={saveUsersData(budget)}

Функцией saveUsersData передаются данные на бэкенд каждый раз, когда будет редактироваться наш блок:

function saveUsersData(deposit) {
    getFetch('deposit/save-user-data/'
            + deposit.user_id_time + '/'
            + deposit.time + '/'
            + deposit.date + '/'
            + deposit.deposit
    );
}

Событие on:paste={handlePaste}

По этому событию мы отловим вставку текста в этот блок, удалим теги и вставим из буфера обмена обычный текст:

function handlePaste(e) {
    e.preventDefault();

    // Получаем из буфера обмена данные в виде простого текста
    var text = (e.originalEvent || e).clipboardData.getData('text/plain');

    // Осуществляем вставку самостоятельно
    document.execCommand("insertHTML", false, text);
}

Событие on:keydown={handleKeydown}

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

function handleKeydown(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        document.execCommand('insertHTML', false, '<br><br>');
    }
}

Отдельное событие под каждый элемент

Скроем один элемент при клике на него. При этом похожие элементы останутся не тронутыми.

У тега a есть класс hide. Он будет активен только в том случае, если переменная current будет равна текущему элементу id:

class:hide="{current === id}"

А это произойдет в том случае, если мы нажмем на текущий элемент. Отработает конструкция, которая и присвоит значение:

<strong>{() => current = id}

Полный пример:

<script>
let current = false;
</script>


<ul class="menu">
    {#each links as name, id}
        <li>
            <a href="#/{name}"
               class:hide="{current === id}"
               on:click="{() => current = id}"
            >
                {name}
            </a>
        </li>
    {/each}
</ul>


<style lang="scss">
    .hide {
        display: none !important;
    }
</style>

Если надо наоборот показать один элемент среди скрытых, то делается это так:

<script>
let displayElement;
</script>

{#each notes as note, i}
   <div class="arr-down" on:click="{() => displayElement = i}"></div>
   <div class:hide="{displayElement !== i}"></div>
{/each}

<style lang="scss">
    .hide {
        display: none !important;
    }
</style>

Кстати, на сайте нет рекламы. У сайта нет цели самоокупаться, но если вам пригодилась информация можете задонатить мне на чашечку кофе в макдаке. Лайкнуть страницу или просто поблагодарить. Карма вам зачтется.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"Svelte — события и отличие от JS"