terça-feira, 13 de junho de 2017

Eventos


Eventos em HTML sao "coisas"que acontecem com os elementos HTML.  Quando o Javascript é utilizado em páginas HTML, ele pode "reagir"a esses eventos. Um evento HTML pode ser alguma coisa que o navegador faz, pode ser algo que o usuário faz. Veja a seguir alguns exemplos de eventos em HTML:

  • Uma página HTML que acabou de carregar;
  • Um campo de entrada HTMl que mudou de valor;
  • Um botão HTML que foi pressionado.
Frequentemente, quando um evento acontece, você pode querer fazer alguma coisa. O JavaScript permite que você execute código quando eventos são detectados. Veja a seguir:

document.querySelector(’html’).onclick = function() {
alert(’Ai! Não me cutuque!’);
}


Há muitas maneiras de conectar um evento com um elemento.  Aqui o elemento HTML foi selecionado, atribuindo ao manipulador
onclick a uma função anônima, que contém o código que
queremos executar. Note que

document.querySelector(’html’).onclick = function() {};

é equivalente a

var myHTML = document.querySelector(’html’);
myHTML.onclick = function() {};


O HTML permite que atribitos de manipuladores de evento,m com código Javascript, sejam adicionados aos elementos HTML.

Com aspas simples:

<element event=’codigo JavaScript’>
 

Com aspas duplas:

<element event="codigo JavaScript»>

No exemplo seguinte, um atributo onclick (com código) é adicionado ao elemento but on em HTML:

<button onclick="document.getElementById(’demo’).innerHTML = Date()">Que horas são?</button>

No exemplo acima, o Javascriot muda o conteúdo do elemento com id="demo". No próximo exemplo, o código muda o conteúdo de seu próprio elemento (usando this.innerHTML):

<button onclick="this.innerHTML = Date()">Que horas são?</button>

O código JavaScript frequentemente tem várias linhas de código. É cada vez mais comum vermos atributos de eventos chamando funções:

<button onclick="displayDate()"> Que horas são?</button>

A seguir uma lista de alguns elementos HTML usuais:



Os  manipuladores de evento podem ser utilizados para manipular e verificar a entrada de dados do usuário, ações do usuário e ações do navegador:
  • Coisas que devem ser feitas toda vez que uma página é carregada;
  • Coisas que devem ser feitas quando uma página é fechada;
  • Ações que devem ser realizadas quando um usuário clica um botão;
  • Conteúdo que deve ser verificado quando o usuário faz uma entrada de dados.
  • E mais...

Nenhum comentário:

Postar um comentário