Eventos do DOM: Como usar eventos de clique em JavaScript
- Detalhes
- Angelo Luis Ferreira
- JavaScript
- Acessos: 994
Objetivo
Neste tutorial, você verá como utilizar eventos de clique em JavaScript. Eventos de clique são ações que ocorrem quando um leitor clica com o mouse sobre um link, botões ou outros elementos de interface com o usuário HTML em uma página web.
Obs.: O evento de clique ocorre mais precisamente no momento em que o leitor solta o botão do mouse após clicar em um elemento HTML em uma página web.
Inicialmente vamos abordar o evento onclick que pode ser definido diretamente no próprio elemento HTML. Em seguida, abordaremos uma forma mais moderna, onde utilizaremos o método eventListener() "click". Leia também: Como criar múltiplos eventos em um único elemento HTML - JavaScript
Definições
Eventos do DOM: Em JavaScript, eventos são funcionalidades de manipulação do DOM (Document Object Model) que permitem a interação dos elementos da página web com o usuário.
DOM (Document Object Model ou Modelo de Objeto de Documento): É uma representação estruturada e hierárquica dos elemento HTML de uma página web. Por meio de linguagens de programação, como o JavaScript por exemplo, podemos acessar, modificar e atualizar seus elementos e atributos inseridos em uma página web.
Formas para usar eventos de "clique" em JavaScript: Existem várias formas para utilizar eventos no JavaScript. Para a utilização de eventos de "clique", podemos utilizar dois formatos poderosos:
a. Usando atributos do HTML: Consiste em adicionar atributos HTML diretamente aos elementos alvos. Podemos executar uma função JavaScript quando clicarmos em um botão ou em algum outro elemento HTML, por exemplo. Basta atribuirmos o atributo onclick ao elemento HTML e atribuir a ele a função desejada. Este formato é muito útil para interações simples.
Embora o uso do atributo "onclick" seja uma maneira direta de adicionar eventos de clique, é importante observar que essa abordagem tende a misturar o código JavaScript com o HTML, o que pode tornar o código menos organizado em projetos maiores. É por isso que, em muitos casos, é preferível usar o método de "eventListener" para adicionar eventos de clique, mantendo o JavaScript separado do HTML.
b. Manipulando eventos via JavaScript: Podemos criar eventos de clique utilizando event listeners em JavaScript, através do método eventListener(). Desta forma, é possível registrar uma função que será ser executado quando clicarmos em um determinado elemento HTML. Este formato fornece maior flexibilidade e escabilidade, pois permite adicionar e remover eventos de acordo a necessidade. Além disso permite também múltiplos eventos em um único elemento HTML.
Compreender como aplicar eventos de clique é um passo essencial na busca da interatividade nas páginas da web, enriquecendo a experiência do leitor de forma significativa.
1.Usando o atributo HTML "onclick"
1.1. O evento onclick executa uma funcionalidade específica quando um elemento HTML é clicado pelo mouse. Embora o elemento botão seja utilizado frequentemente para esta funcionalidade, é possível aplicarmos o atributo onclick a outros elementos HTML também.
1.1.1. O atributo onclick é uma maneira tradicional de adicionar eventos de clique diretamente a elementos HTML. Ele permite que você associe uma ação a um elemento quando o usuário clica nele.
1.1.2. Para que possamos atribuir essa funcionalidade é necessário inserirmos a função JavaScript que desejamos executar dentro da tag de abertura do elemento HTML que se deseja clicar.
1.1.3. Quando o elemento é clicado, a função ou código JavaScript especificado no atributo onclick é executado.
1.2. Sintaxe básica:
<elemento onclick="function()">Clique aqui</element>
1.2.1. Onde:
elemento: elemento HTML que se deseja executar um evento específico quando clicado.
onclick: atributo HTML para apontar uma função JavaScript que será executada quando o elemento HTML for clicado.
1.3. Exemplos de como você pode usar o atributo onclick:
1.3.1. Neste exemplo, temos um botão que exibe uma mensagem de alerta quando é clicado. O atributo "onclick" está vinculado à função "exibirMensagem()", que é executada quando o botão é clicado.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de onclick</title>
</head>
<body>
<button onclick="exibirMensagem()">Clique em mim</button>
<script>
function exibirMensagem() {
alert("Você clicou no botão!");
}
</script>
</body>
</html>
Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.
1.3.2. Neste segundo exemplo, ao clicar em um parágrafo, a cor do texto muda para vermelho. O atributo "onclick" está vinculado à função "mudarCor()", que manipula o estilo do elemento quando ele é clicado.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de onclick</title>
</head>
<body>
<p onclick="mudarCor()">Clique neste parágrafo para mudar a cor do texto.</p>
<script>
function mudarCor() {
document.querySelector('p').style.color = 'red';
}
</script>
</body>
</html>
Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.
2.Usando o método addEventListener() com evento 'click'
2.1. O método addEventListener() é uma abordagem moderna e mais flexível para lidar com eventos em comparação com o uso do atributo onclick. Ele permite adicionar um "ouvinte de eventos" a um elemento HTML específico para ouvir quando um evento, como um clique, ocorre.
2.1.1. Os 'ouvintes de eventos' em JavaScript são blocos de código que são executados quando um determinado evento é acionado em um elemento HTML. Eles permitem que você capture eventos específicos e execute ações correspondentes.
2.1.2. Quando utilizamos o método addEventListener() para criar eventos em JavaScript podemos separar o código HMTL do JavaScript, permitindo maior flexibilidade para adicionar ou remover eventos de acordo com a nossa necessidade. Também permite a criação de múltiplos eventos em um único elemento HTML, leia: Como criar múltiplos eventos em um único elemento HTML - JavaScript
2.1. Sintaxe básica:
// Seleciona o elemento HTML
const meuElemento = document.getElementById('idDoElemento');
// Adiciona um eventListener para o evento 'click'
meuElemento.addEventListener('click', function() {
// Código a ser executado quando o elemento é clicado
});2.2.1. Onde:
-
meuElementoé o elemento HTML ao qual você deseja adicionar o eventListener. Pode ser selecionado por meio dedocument.getElementById(),document.querySelector(), ou outros métodos de seleção de elementos. -
addEventListener()é o método usado para adicionar um ouvinte de eventos ao elemento. -
'click'é o tipo de evento que estamos ouvindo. Neste caso, estamos ouvindo o evento de clique. -
A função anônima (ou pode ser uma função nomeada) dentro do
addEventListener()é o código que será executado quando o evento 'click' ocorrer no elemento selecionado.
2.3. Exemplos de como você pode usar o método addEventListener()
2.3.1. Neste exemplo, usamos addEventListener() para adicionar um ouvinte de eventos ao botão. Quando o botão é clicado, a função anônima definida é executada, exibindo uma mensagem de alerta.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de addEventListener</title>
</head>
<body>
<button id="meuBotao">Clique em mim</button>
<script>
// Seleciona o botão
const botao = document.getElementById('meuBotao');
// Adiciona um eventListener para o evento 'click'
botao.addEventListener('click', function() {
alert('Você clicou no botão!');
});
</script>
</body>
</html>
Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.
2.3.1. Neste segundo exemplo, ao clicar no parágrafo, o texto muda para a cor azul. O addEventListener() é usado para adicionar um ouvinte de eventos ao parágrafo, que modifica o estilo do texto quando o parágrafo é clicado.
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de addEventListener</title>
</head>
<body>
<p id="meuParagrafo">Clique neste parágrafo para mudar a cor do texto.</p>
<script>
// Seleciona o parágrafo
const paragrafo = document.getElementById('meuParagrafo');
// Adiciona um eventListener para o evento 'click'
paragrafo.addEventListener('click', function() {
paragrafo.style.color = 'blue';
});
</script>
</body>
</html>
Veja o resultado do exemplo no Squids Editor: Abrir SQUIDS EDITOR.
REFERÊNCIAS VISUALDICAS
- Manipulando o DOM: como selecionar elementos HTML usando JavaScript
- Como manipular propriedades CSS com JavaScript
- Como criar múltiplos eventos em um único elemento HTML - JavaScript
REFERÊNCIA JAVASCRIPT
1. [Introdução a eventos] >> Sintaxe e exemplos - MDN Web Docs.
2. [Manipulador onclick] >> Sintaxe e exemplos - MDN Web Docs.
3. [Element.addEventListener()] » Sobre a propriedade children - MDN Web Docs.
4. [EventTarget.removeEventListener()] >> Sintaxe e exemplos - MDN Web Docs.
5. [getElementById()] >> Sintaxe e exemplos - MDN Web Docs.
6. [getElementsByClassName()] >> Sintaxe e exemplos - MDN Web Docs.
7. [getElementsByTagName()] >> Sintaxe e exemplos - MDN Web Docs.
8. [querySelector()] >> Sintaxe e exemplos - MDN Web Docs.
9. [querySelectorAll()] >> Sintaxe e exemplos - MDN Web Docs.
Dica para aprender mais
DICA: Aprenda a ser um programador mais do que completo (Pacote Full Stack)
