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>');
    }
}

Одинаковые события

Пример одинаковых событий on:click

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

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

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

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

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