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:

html<input id="button" type="submit">

Agora, vamos obter uma referência ao botão em uma variável:

javascriptlet 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:

javascriptbutton.addEventListener('click', function() {
  console.log('!!!');
});

html<input id="button1" type="submit">
<input id="button2" type="submit">
<input id="button3" type="submit">