Evento em JavaScript - O que é ? Para que serve?

Neste tutorial de nossa apostila de JavaScript, vamos dar uma introdução bem simples sobre o que são os events em JS, para que servem, onde são usados e, inclusive, onde já usamos em nossa apostila online.

Eventos - O que são? Para que servem ?


Na sua vida, no seu dia-a-dia, o que é um evento?
É um acontecimento, uma ação, algo que ocorre.

Eventos, não só em JavaScript mas como em outras linguagens, são ações que um programa ou script toma em resposta a alguma coisa que o usuário fez.

Você já deve ter entrado em sites que não deixam você clicar com o botão direito em cima, pra copiar o conteúdo. Ou seja, acontece uma ação (uma mensagem de erro aparece), em resposta a sua ação (clicar com o mouse). Se não clicar, nada ocorre.

Outros sites não deixam você dar control + C pra copiar um conteúdo, bloqueiam, ou mandam uma mensagem junto com o texto copiado. Ou seja, dependendo da ação que você toma (dar ctrl+C), o JavaScript vai desencadear um evento (mensagem de erro, por exemplo).

O exemplo mais conhecido seria o ato de pressionar um botão. O carregamento de uma página também pode desencadear um evento, a introdução de alguma informação em algum campo de input, passar o mouse por uma determinada região da página etc.

Eventos - Como fazer ?

Existem basicamente duas maneiras de se trabalhar com eventos, a primeira delas é inline, direto no código HTML.
O protótipo de um evento 'na linha' é:
<elemento evento="ação">

Ou seja, a ação vai ocorrer no elemento quando o usuário desencadear um evento.
Vamos relembrar um evento inline que usamos bastante durante nossa apostila:

<button onclick="funcao()">Função</button><br />


Lembram? Usamos para criar botões.
Funciona assim: o evento é o onclick, ou seja 'no clique'.

Quer dizer que quando o usuário clicar no elemento (no caso, um botão <button>), ele vai chamar uma ação. No caso, que ação é essa? Invocar a funcao().

Testem o seguinte exemplo de código HTML:

<p onclick="this.innerHTML='Tcharam!!!'">Clique aqui</p>


O resultado é o seguinte:

Clique aqui

Veja...o elemento é apenas um parágrafo, um simplório <p> </p>
Quando clicamos, desencadeia um evento do tipo onclick, que através do atributo innerHTML do próprio documento (this), e a ação é simplesmente substituir o texto "Clique aqui" por "Tcharam!!!".

Bem simples, não?

Já a outra maneira de fazer eventos é a através de um evento externo, usando um manipulador de eventos (event handler), que vamos estudar em tutorial futuro.

Nenhum comentário:

Postar um comentário