Vanilla Javascript - #18 Eventos

Nesta aula trabalharemos com eventos. Eventos são a base do Javascript, pois são eles que permitem a interatividade com os usuários e a troca de informações com resultados.

Eventos inline

A forma mais básica de usar eventos é chamando no próprio HTML (inline). Apesar de funcionar normalmente, essa não é uma boa prática, pois fere o princípio da divisão de camadas (HTML, JS, CSS, BACKEND...).

<button onclick="alert('oi')">Click me</button>

Evento no arquivo externo

O ideal é que utilizemos eventos em arquivos externos. Devemos então selecionar o elemento alvo e depois atribuir a ele o evento desejado.

<button id="btn">Click me</button>
<select name="select" id="select">
    <option value="">Select</option>
    <option value="option1">option1</option>
    <option value="option2">option2</option>
</select>

let btn=doc.querySelector("#btn");
let sel=doc.querySelector("#select");

//Show alert
function alertar(event)
{
    alert('Alert!');
}

sel.addEventListener('change',alertar,false);
btn.addEventListener("click", alertar, false);

Repare nos eventos acima, que eu tenho a palavra event como parâmetro. Esse event abrigará todas as propriedades do elemento alvo.