Vinculando manipuladores a elementos em JavaScript
Vamos agora aprender a fazer nossos elementos DOM reagirem às ações do usuário no site. Por exemplo, o usuário clica em algum lugar com o mouse, e nosso código, em resposta, deve processar esse clique e exibir alguma informação na tela.
As ações do usuário que podemos rastrear via JavaScript são chamadas de eventos. Os eventos podem ser os seguintes: clique do mouse em um elemento da página, passagem do mouse sobre um elemento da página ou o oposto - a saída do cursor do mouse do elemento e assim por diante. Além disso, existem eventos que não dependem das ações do usuário, por exemplo, o evento de carregamento da página HTML no navegador.
Vamos, por exemplo, criar um botão que, ao ser clicado, exibirá algum texto na tela. Primeiro, vamos fazer o código HTML do botão:
<input id="button" type="submit">
Agora, vamos obter uma referência ao botão em uma variável:
let button = document.querySelector('#button');
Agora, precisamos definir a reação do nosso
botão ao clicar nele. Para isso, em JavaScript,
existe um método especial addEventListener,
que recebe como primeiro parâmetro o nome do evento
(o clique no botão tem o nome 'click'),
e como segundo parâmetro - a função de callback,
que é executada quando o evento ocorre.
Vamos, por exemplo, exibir algum texto ao clicar no botão:
button.addEventListener('click', function() {
console.log('!!!');
});
Existem 3 botões:
<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">
Faça com que, ao clicar no primeiro botão,
o número 1 seja exibido na tela,
ao clicar no segundo - o número 2,
e ao clicar no terceiro - o número 3.
