Eventos em JavaScript

JavaScript é uma linguagem de programação muito usada no desenvolvimento de aplicativos para a Web. É uma das linguagens de programação mais populares e usadas no mundo que cada vez mais vem crescendo e ganhando muitos adeptos devido as inúmeras coisas que são possíveis de serem realizadas com essa linguagem. Javascript possui eventos para fornecer uma interface dinâmica para uma página da web.

A interação do JavaScript com o HTML é tratada por meio de eventos que ocorrem quando o usuário ou o navegador manipula uma página, ou seja, os eventos formam as ações ou ocorrências de uma página da web, são utilizados em javascript para executar ações na página no navegador e mudando caso necessário o comportamento padrão do mesmo.

Exemplos: Quando a página é carregada, quando o usuário clica em um botão, quando pressiona qualquer tecla, fechar uma janela, redimensionar uma janela etc. É importante notar que eventos web não são parte do core da linguagem JavaScript — elas são definidas como parte das APIs JavaScript incorporadas ao navegador.

Os principais eventos mais utilizados são:

onBlur: remove o foco do elemento.

onChange: muda o valor do elemento.

onClick: o elemento é clicado pelo usuário.

onFocus: o elemento é focado.

onKeyPress: o usuário pressiona uma tecla sobre o elemento.

onLoad: carrega o elemento por completo.

onMouseOver: define ação quando o usuário passa o mouse sobre o elemento.

onMouseOut: define ação quando o usuário retira o mouse sobre o elemento.

onSubmit: define ação ao enviar um formulário.

Como funcionam os eventos

Antes de entendermos como funciona os eventos vamos compreender o conceito de Manipulador de eventos, o mesmo é um bloco de código que será executado quando o evento for disparado.

Quando eventos acontecem com um elemento HTML em uma página da web, ele verifica se algum manipulador de eventos está anexado a ele. Se a resposta for sim, ele os chama na respectiva ordem, enviando referências e informações adicionais para cada evento ocorrido. Os manipuladores de eventos agem sobre o evento. Existem dois tipos de ordem de evento:
event capture e event bubbling .

O event capture começa com o elemento mais externo no DOM e trabalha para dentro do elemento HTML em que o evento ocorreu e sai novamente. Por exemplo, um clique em uma página da Web deve primeiro verificar o HTML elemento para onclick manipuladores de eventos, o body elemento e assim por diante, até atingir o destino do evento.

O event bubbling funciona exatamente da maneira oposta: ele começa verificando o destino do evento para todos os manipuladores de eventos anexados e, em seguida, passa por cada elemento pai respectivo até atingir o elemento HTML.

Como os eventos são utilizados ?

Os eventos podem ser aplicados de duas principais maneiras:

Utilizados diretamente no documento HTML , de forma que tudo é definido na tag do elemento, como visto abaixo.

No exemplo acima quando o evento onclick acontecer a função calculadoraDeIMC() será chamada. Essa maneira é mais antiga de ser aplicada. Este método de utilização de eventos em Javascript não é recomendável , pois certamente perderia muito tempo e deixaria de ser eficiente se for utilizado em um site grande com muitas páginas e arquivos, pois você teria que especificar em cada uma das tags de todos os arquivos do site.

Utilizados em um arquivo externo, usando manipulador de eventos. Nessa maneira de utilizar eventos é usado o manipulador event listeners que são escutadores de eventos que possui duas funções principais:

addEventListener(): Adiciona uma função que será disparada quando ocorrer determinado evento no objeto. Dentro da função, especificamos dois parâmetros — o nome do evento para o qual queremos registrar esse manipulador, e o código que compreende a função do manipulador que queremos executar em resposta a ele.

alvo.addEventListener(nome do evento, nome da função);

removeEventListener(): Remove um listener previamente adicionado em um objeto e retorna true em caso de sucesso.

alvo.removeEventListener()(nome do evento, nome da função);

Exemplo Abaixo:

Veja que o primeiro parâmetro da função addEventListener() é evento ‘click’ (sem o prefixo “on”), o segundo é a função utilizada para tratar tal evento nesse caso a função calculadoraDeIMC, esse é o jeito moderno feito em um arquivo javascript.

Aspectos positivos

Capacidade de escrever o tipo de páginas da Web e scripts interativos . Notificar o código de coisas interessantes que ocorreram. Com JavaScript é possível combinar funções e métodos a eventos. Eventos são usados para executar respostas codificadas em JavaScript.

Aspectos negativos

Problema da diferença entre os navegadores. Infelizmente, os navegadores apresentam algumas diferenças que devem ser dribladas com alguns truques no seu código. Nem sempre compatível com todos os navegadores e sistemas existentes.

Conclusão

Nesse artigo aprendemos o que são eventos e o quanto são importante para deixar seu site interativo, vimos a evolução dos eventos que nos primórdios do JavaScripting, usamos manipuladores de eventos diretamente dentro do elemento HTML também chamada de forma inline , mas passou a também ser utilizado em arquivo JavaScript externo, passando a ser uma forma moderna de ser usada. Através do uso de JavaScript, você pode detectar quando certos eventos acontecem e fazer com que coisas ocorram em resposta a esses eventos, como fazer que os botões fechem as janelas, as mensagens sejam exibidas aos usuários, os dados sejam validados e praticamente qualquer outro tipo de resposta imaginável. Quando o usuário faz algo, um evento ocorre. Há também alguns eventos que não são causados ​​diretamente pelo usuário: o load evento que é acionado quando uma página é carregada, por exemplo. Vimos também que os eventos possuem seus aspectos positivos e negativos. E como mencionado acima eventos não são exclusivos ao JavaScript, eles são usados principalmente para tratar a interação do JavaScript com o HTML.