Dominando os Atributos de Evento HTML | Guia Completo

Introdução

Os atributos de evento HTML são usados para adicionar funcionalidade aos elementos HTML. Quando um determinado evento ocorre, como um usuário clicar em um botão ou enviar um formulário, o código JavaScript pode ser executado. Neste laboratório, você aprenderá como usar os atributos de evento HTML para adicionar interatividade às suas páginas web.

Nota: Você pode praticar a codificação em index.html e aprender Como Escrever HTML no Visual Studio Code. Por favor, clique em 'Go Live' no canto inferior direito para executar o serviço web na porta 8080. Em seguida, você pode atualizar a aba Web 8080 para visualizar a página web.

Criando um Documento HTML

Crie um novo arquivo chamado index.html e adicione a estrutura HTML básica.

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

Adicionando um Botão

Adicione um elemento button ao body do seu documento HTML. Dê a ele algum texto para exibir e um atributo id para que possamos referenciá-lo em nosso código JavaScript.

<button id="myButton">Click Here</button>

Adicionando um Atributo de Evento

Adicione um atributo onclick ao elemento button. Neste atributo, especificaremos o código JavaScript que deve ser executado quando o botão for clicado.

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

Adicionando Mais Funcionalidades

Adicione um elemento div ao body do seu documento HTML. Este elemento será usado para exibir texto quando o botão for clicado.

<div id="myDiv"></div>

Em seguida, adicione código JavaScript para atualizar o texto do elemento div quando o botão for clicado.

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

Manipulação do Envio de Formulários

Adicione um formulário HTML ao body do seu documento HTML. Adicione também um atributo onsubmit ao formulário para especificar o código JavaScript que deve ser executado quando o formulário for enviado.

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Usando Event Listeners

Em vez de usar atributos de evento diretamente em nosso HTML, também podemos usar JavaScript para anexar ouvintes de eventos (event listeners) aos nossos elementos HTML.

Primeiro, remova os atributos onclick e onsubmit dos seus elementos HTML.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

Em seguida, crie uma função JavaScript que será chamada quando o botão for clicado. Esta função deve atualizar o texto do elemento div.

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

Finalmente, anexe um ouvinte de evento ao botão usando JavaScript.

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

Removendo Event Listeners

Também podemos remover ouvintes de eventos usando JavaScript.

Adicione um novo botão ao seu documento HTML. Este botão removerá o ouvinte de evento de clique do primeiro botão.

<button id="removeButton">Remove Click Event Listener</button>

Em seguida, crie uma nova função JavaScript que removerá o ouvinte de evento de clique do primeiro botão.

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

Finalmente, anexe um ouvinte de evento ao novo botão que chamará a função removeClickListener() quando clicado.

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

Resumo

Neste laboratório, você aprendeu como usar Atributos de Evento HTML para adicionar interatividade às suas páginas web. Você também aprendeu como usar JavaScript para anexar e remover ouvintes de eventos (event listeners) de elementos HTML. Com essas ferramentas, você pode criar páginas web dinâmicas que respondem à entrada do usuário.