Manipulação de Eventos em JavaScript

Introdução

Bem-vindo ao laboratório de Manipulação de Eventos em JavaScript! Eventos são ações que acontecem no navegador, como um usuário clicando em um botão, movendo o mouse ou pressionando uma tecla. A manipulação de eventos é o processo de escrever código que responde a esses eventos, tornando suas páginas web interativas e dinâmicas.

Neste laboratório, você aprenderá as maneiras fundamentais de manipular eventos em JavaScript. Começaremos com o atributo básico onclick em HTML e progrediremos para o método mais poderoso e flexível addEventListener. Você também aprenderá a usar o objeto event para controlar o comportamento do evento e obter informações sobre ele.

Ao final deste laboratório, você será capaz de:

• Anexar manipuladores de eventos a elementos HTML.
• Separar sua lógica JavaScript de sua estrutura HTML.
• Prevenir a ação padrão do navegador para um evento.
• Identificar qual elemento disparou um evento.

Vamos começar!

Adicionar o atributo onclick ao elemento HTML

Nesta etapa, você aprenderá a maneira mais direta de manipular um evento: usando um atributo de manipulador de eventos HTML. O atributo onclick permite que você execute um trecho de código JavaScript quando um elemento é clicado. Embora este método seja simples, geralmente é melhor separar seu HTML e JavaScript, o que abordaremos nas próximas etapas.

Primeiro, vamos adicionar um atributo onclick ao nosso botão.

1. No explorador de arquivos no lado esquerdo do WebIDE, encontre e abra o arquivo index.html.
2. Localize o elemento <button>.
3. Modifique a tag do botão para incluir um atributo onclick que exiba um alerta.

Seu elemento <button> modificado deve se parecer com isto:

<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>

Após adicionar o código, salve o arquivo index.html.

Para ver suas alterações, mude para a aba Web 8080 na parte superior da interface. Clique no botão "Click Me" e você deverá ver um alerta do navegador aparecer com a mensagem "Button Clicked!".

Usar addEventListener para o evento de clique

Nesta etapa, usaremos a abordagem moderna e recomendada para manipulação de eventos: o método addEventListener. Este método permite que você anexe um manipulador de eventos a um elemento sem misturar seu código JavaScript à sua marcação HTML. Essa prática é conhecida como "JavaScript discreto" (unobtrusive JavaScript) e leva a um código mais limpo e de fácil manutenção.

Primeiro, vamos limpar nosso HTML removendo o atributo onclick que adicionamos na etapa anterior.

1. Abra o arquivo index.html.
2. Remova o atributo onclick do elemento <button>. Ele deve ficar assim novamente:

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

Agora, vamos adicionar o ouvinte de eventos usando JavaScript.

1. Abra o arquivo script.js no explorador de arquivos. Ele está atualmente vazio.
2. Adicione o seguinte código ao script.js:

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Clicked with addEventListener!");
});

Vamos analisar este código:

• document.querySelector('#myButton'): Esta linha seleciona o elemento do botão do DOM usando seu ID, myButton.
• addEventListener('click', ...): Este método é chamado no elemento do botão. Ele recebe dois argumentos principais:
  • O primeiro argumento é o tipo de evento a ser escutado, neste caso, 'click'.
  • O segundo argumento é a função "manipuladora" ou "ouvinte" que será executada quando o evento ocorrer. Aqui, estamos usando uma função de seta anônima () => { ... }.

Salve o arquivo script.js e mude para a aba Web 8080. Clique no botão e você deverá agora ver um alerta com a mensagem "Clicked with addEventListener!".

Definir a função de tratamento de eventos

Nesta etapa, você aprenderá a tornar seu código ainda mais limpo e reutilizável definindo uma função nomeada para seu manipulador de eventos. Em vez de usar uma função anônima diretamente dentro de addEventListener, você pode definir uma função separada e, em seguida, passar seu nome para o ouvinte.

Essa abordagem é útil quando a lógica de manipulação de eventos é complexa ou quando você deseja reutilizar a mesma função para múltiplos eventos ou elementos.

Vamos modificar nosso arquivo script.js para usar uma função nomeada.

1. Abra o arquivo script.js.
2. Substitua o código existente pelo seguinte:

const button = document.querySelector("#myButton");

function handleClick() {
  button.textContent = "I was clicked!";
}

button.addEventListener("click", handleClick);

Veja o que mudou:

• Definimos uma nova função chamada handleClick. Esta função contém a lógica que será executada quando o botão for clicado — neste caso, ela altera o texto do botão.
• Em addEventListener, agora passamos o nome da função handleClick como segundo argumento. Observe que estamos passando a própria referência da função, não a chamando (ou seja, handleClick, e não handleClick()). O navegador invocará a função para nós quando o evento de clique ocorrer.

Salve o arquivo script.js e vá para a aba Web 8080. Clique no botão. Desta vez, em vez de um alerta, você verá o texto do botão mudar para "I was clicked!".

Prevenir ação padrão com preventDefault

Nesta etapa, exploraremos o objeto event e um de seus métodos mais úteis: preventDefault(). Quando um evento ocorre, o navegador passa automaticamente um objeto event para a função manipuladora. Este objeto contém informações sobre o evento e permite controlar seu comportamento.

Alguns elementos HTML têm uma ação padrão. Por exemplo, a ação padrão para um link (tag <a>) é navegar para a URL especificada em seu atributo href. O método event.preventDefault() permite interromper a ocorrência dessa ação padrão.

Nosso arquivo index.html já contém um link com o ID myLink. Vamos adicionar um ouvinte de eventos a ele para impedir sua navegação.

1. Abra o arquivo script.js.
2. Adicione o seguinte código ao final do arquivo:

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Vamos analisar o novo código:

• Selecionamos o elemento <a> com o ID myLink.
• Definimos uma função manipuladora handleLinkClick que aceita um parâmetro, que nomeamos event. Este será o objeto de evento fornecido pelo navegador.
• Dentro da função, chamamos event.preventDefault() para impedir que o navegador siga o link.
• Também adicionamos uma mensagem console.log para confirmar que nosso manipulador está em execução.

Salve o arquivo script.js. Agora, vá para a aba Web 8080.

1. Clique com o botão direito em qualquer lugar da página e selecione "Inspecionar" para abrir as ferramentas de desenvolvedor do navegador.
2. Mude para a aba "Console" dentro das ferramentas de desenvolvedor.
3. Clique no link "Visite LabEx (o link será desativado)".

Você notará duas coisas: a página não navega para labex.io, e a mensagem "Link click detected, navigation prevented." aparece no console.

Aceder ao alvo do evento com event.target

Nesta etapa final, aprenderemos sobre outra propriedade importante do objeto event: event.target. Esta propriedade fornece uma referência ao elemento específico que disparou o evento. Isso é incrivelmente útil, especialmente quando você tem um único ouvinte de eventos em um elemento pai gerenciando eventos para vários filhos (uma técnica chamada delegação de eventos).

Para este laboratório, usaremos event.target em um contexto mais simples: para modificar o elemento que foi clicado diretamente, sem a necessidade de uma variável separada para ele.

Vamos modificar a função handleClick do nosso botão para usar event.target.

1. Abra o arquivo script.js.
2. Encontre a função handleClick que você escreveu na Etapa 3 e modifique-a para aceitar o parâmetro event e usar event.target.

Substitua a função handleClick antiga por esta nova versão:

function handleClick(event) {
  // event.target refere-se ao botão que foi clicado
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

Aqui está a análise:

• A função handleClick agora aceita o objeto event como parâmetro.
• Em vez de usar a variável button, agora usamos event.target para nos referirmos ao elemento que foi clicado.
• event.target.style.backgroundColor = 'lightblue' altera a cor de fundo do elemento clicado.
• event.target.textContent = 'My color changed!' altera seu conteúdo de texto.

Seu arquivo script.js completo agora deve se parecer com algo assim:

const button = document.querySelector("#myButton");

function handleClick(event) {
  // event.target refere-se ao botão que foi clicado
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

button.addEventListener("click", handleClick);

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

Salve o arquivo e mude para a aba Web 8080. Clique no botão. Você verá a cor de fundo mudar para azul claro e o texto ser atualizado para "My color changed!".

Resumo

Parabéns por completar o laboratório de Manipulação de Eventos em JavaScript! Você aprendeu com sucesso os conceitos centrais para tornar as páginas web interativas, respondendo a ações do usuário.

Neste laboratório, você cobriu:

• O atributo básico onclick para manipulação simples de eventos diretamente no HTML.
• O método moderno e preferido addEventListener para separar preocupações e manter seu código JavaScript limpo.
• Como definir e usar funções nomeadas como manipuladores de eventos para melhor organização e reutilização de código.
• O poderoso objeto event, usando event.preventDefault() para interromper comportamentos padrão do navegador.
• Como identificar o elemento que disparou um evento usando a propriedade event.target.

Essas habilidades são fundamentais para o desenvolvimento web front-end e serão os blocos de construção para criar aplicações web ricas, dinâmicas e amigáveis. Continue praticando esses conceitos para dominá-los.