В реактивном фреймворке Svelte не придется использовать addEventListener. Во-первых он не будет срабатывать, потому что многие элементы на странице создаются после её загрузки, а затем еще и меняются в процессе. А во-вторых в этом нет необходимости.
Альтернатива addEventListener
Тем не менее addEventListener можно использовать, ведь Svelte это обычный JS. И даже можно будет некоторые элементы найти, если поместить его внутрь функции onMount.
import {onMount} from "svelte";
onMount(async () => {
document.addEventListener();
});
</script>
Отказ от addEventListener только добавит плюсы. Больше не нужно искать элементы по getElementById, querySelector или querySelectorAll, а потом обрабатывать каждый forEach. Не надо будет также делать проверки, тот ли выбран элемент или нет. И т.д. Все это экономит время — не нужно писать лишний код.
Всё это заменяет добавление событий непосредственно на элемент в нужном месте html.
Например, мы добавляем разного рода события на элемент 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 передаются данные на бэкенд каждый раз, когда будет редактироваться наш блок:
getFetch('deposit/save-user-data/'
+ deposit.user_id_time + '/'
+ deposit.time + '/'
+ deposit.date + '/'
+ deposit.deposit
);
}
Событие on:paste={handlePaste}
По этому событию мы отловим вставку текста в этот блок, удалим теги и вставим из буфера обмена обычный текст:
e.preventDefault();
// Получаем из буфера обмена данные в виде простого текста
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// Осуществляем вставку самостоятельно
document.execCommand("insertHTML", false, text);
}
Событие on:keydown={handleKeydown}
Это событие позволит нам ловить нажатие клавиш на клавиатуре и производить какие-то действия:
if (e.key === 'Enter') {
e.preventDefault();
document.execCommand('insertHTML', false, '<br><br>');
}
}
Одинаковые события
Пример одинаковых событий on:click
{#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>
