В реактивном фреймворке 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>');
}
}
Отдельное событие под каждый элемент
Скроем один элемент при клике на него. При этом похожие элементы останутся не тронутыми.
У тега a есть класс hide. Он будет активен только в том случае, если переменная current будет равна текущему элементу id:
А это произойдет в том случае, если мы нажмем на текущий элемент. Отработает конструкция, которая и присвоит значение:
Полный пример:
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>
Если надо наоборот показать один элемент среди скрытых, то делается это так:
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>
Вызов функции с переменной и без переменной
Вызов без переменной:
Вызов с переменной:
