Olá, o exercício foi divertido e gostei de praticar, porém me surgiu uma duvida no meio dele. Ao criar meu modificar de evento com uma arrow function eu usei o event.preventDefault(), ele funcionou porém não pude deixar de perceber que tanto a IDE (Visual Studio Code) quanto a documentação informam que o event. preventDefault foi preterido e desencorajam o seu uso , o que devo usar no lugar, segue meu código para analise e feedback( gostaria de saber melhores praticas:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercicios JS</title>
</head>
<body>
<form id="form">
<input class="input-item" id="input-item" type="text" placeholder="Digite a tarefa que deseja adicionar"></input>
<button class="button-item" id="botao-salvar">Salvar tarefa</button>
</form>
<ul id="lista-item">
<li>
<div style="display: flex;">
<input type="checkbox">
<p>teste</p>
</div>
</li>
</ul>
</body>
<script src="script.js"></script>
</html>
script.js:
let botaoSalvar = document.getElementById("botao-salvar");
botaoSalvar.addEventListener("click", () => {
event.preventDefault();
const ul = document.getElementById("lista-item");
const inputNomeItem = document.getElementById("input-item");
const itemLista = document.createElement("li");
const containerItem = document.createElement("div");
containerItem.style = "display:flex";
const inputItem = document.createElement("input");
inputItem.type = "checkbox";
const nomeItem = document.createElement("p");
nomeItem.textContent = inputNomeItem.value;
ul.appendChild(itemLista);
itemLista.appendChild(containerItem);
containerItem.appendChild(inputItem);
containerItem.appendChild(nomeItem);
inputNomeItem.value = "";
});
