JavaScript Eventos

 

Olá! Vamos falar sobre eventos em JavaScript?

Eventos são ações ou ocorrências que podem ser detectadas pelo navegador e pelo JavaScript. Alguns exemplos de eventos são: cliques em botões, digitação em campos de formulários, movimentos do mouse, etc.

Podemos utilizar o JavaScript para registrar uma função que será executada quando um determinado evento ocorrer em um elemento da página.

Para isso, podemos utilizar o método addEventListener() que é suportado por todos os navegadores modernos. Esse método recebe como primeiro parâmetro o nome do evento e como segundo parâmetro a função que será executada quando o evento ocorrer.

Veja um exemplo de como utilizar o addEventListener() para executar uma função quando o botão for clicado:

javascript
const button = document.querySelector('#meu-botao');

button.addEventListener('click', function() {
  console.log('O botão foi clicado!');
});

Nesse exemplo, estamos selecionando o elemento com o id meu-botao utilizando o método querySelector(). Em seguida, estamos registrando uma função que será executada quando o evento click ocorrer no botão.

Podemos também utilizar o addEventListener() para registrar funções para outros tipos de eventos, como mouseenter, mouseleave, submit, keydown, entre outros.

Além disso, também podemos utilizar a propriedade event.target dentro da função que é executada pelo evento para acessar o elemento que disparou o evento.

Por exemplo, se quisermos alterar o conteúdo de um parágrafo quando o mouse passar por cima dele, podemos fazer o seguinte:

javascript
const paragrafo = document.querySelector('p');

paragrafo.addEventListener('mouseenter', function(event) {
  event.target.textContent = 'O mouse passou por cima!';
});

Nesse exemplo, estamos selecionando o primeiro elemento p da página e registrando uma função que será executada quando o evento mouseenter ocorrer no parágrafo. Dentro da função, estamos utilizando a propriedade event.target para acessar o parágrafo que disparou o evento e alterar seu conteúdo utilizando a propriedade textContent.

Esses são apenas alguns exemplos de como podemos utilizar eventos em JavaScript para tornar nossas páginas mais interativas e dinâmicas.