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