evento JavaScript HTML DOM
HTML DOM JavaScript, HTML tem a capacidade de reagir a eventos.
Exemplos
Reagir a eventos
Podemos executar JavaScript quando o evento ocorre, por exemplo, quando o usuário clica no elemento HTML.
Para executar código quando um usuário clica em um elemento, adicionar um código JavaScript para atributos do evento HTML:
exemplos de evento HTML:
- Quando o usuário clica o mouse
- Quando a página é carregada
- Quando a imagem é carregada
- Quando o mouse se move sobre o elemento
- Quando o campo de entrada é alterado
- Quando você envia um formulário HTML
- Quando o usuário aciona a tecla
Neste exemplo, quando um usuário sobre o elemento <h1>, quando clicado, irá mudar o seu conteúdo:
Exemplos
<Html>
<Body>
<H1 onclick = "this.innerHTML = 'Opa!'"> Clique sobre o texto! </ H1>
</ Body>
</ Html>
tente »
Neste caso, para chamar uma função do manipulador de eventos:
Exemplos
<Html>
<Head>
<Script>
changetext função (id)
{
id.innerHTML = "Ooops!";
}
</ Script>
</ Head>
<Body>
<H1 onclick = "changetext (this)"> clique no texto! </ H1>
</ Body>
</ Html>
tente »
Atributos HTML Evento
Para atribuir eventos a elementos HTML, você pode usar os atributos de eventos.
Exemplos
Atribuído ao evento onclick elemento de botão:
tente »
No exemplo acima, a função chamada DisplayDate será executada quando o botão é clicado.
Use o DOM HTML para atribuir um evento
HTML DOM permite que você use JavaScript para atribuir eventos a elementos HTML:
Exemplos
Atribuído ao evento onclick elemento de botão:
. Document.getElementById ( "myBtn") onclick = function () {DisplayDate ()};
</ Script>
tente »
No exemplo acima, a função é atribuída a um id = myButn "elemento HTML DisplayDate nomeado.
Clique no botão quando a função JavaScript será executado.
onload e onunload evento
onload e onunload evento é acionado quando o usuário entra ou sai da página.
evento de carregamento pode ser usado o tipo de navegador e versão do navegador que o visitante é detectado, e com base nesta informação para carregar a versão correta da página.
onload e onunload evento pode ser usado para lidar com cookie.
evento onchange
eventos de validação campo de entrada muitas vezes combinados onchange de usar.
Aqui está um exemplo de como usar o onchange. Quando o usuário altera o conteúdo do campo de entrada, chama a função maiúscula ().
onmouseover e onmouseout eventos
onmouseover e onmouseout eventos podem ser usados para acionar funções quando mouse se move do usuário para o topo do elemento HTML ou elementos removidos.
onmousedown, onmouseup e evento onclick
onmousedown, onmouseup e onclick constituem todas as partes do evento clique do mouse. Primeiro, quando você clica no botão do mouse, o gatilho onmousedown evento quando o botão do mouse é liberado, ele irá acionar onmouseup evento, e, finalmente, quando a realização de um clique do mouse, ele irá disparar o evento onclick.
Exemplos
Um exemplo simples onmousedown-onmouseup:
mais exemplos
onmousedown e onmouseup
Quando o usuário pressiona o botão do mouse, a substituição de uma imagem.
onload
Quando a página é terminar de carregar, exibir uma caixa de mensagem.
onfocus
Quando o campo de entrada tem o foco, mudar a cor de fundo.
eventos do mouse
Quando o ponteiro se move sobre o elemento, mudar sua cor, quando o ponteiro se move para fora do texto, sua cor vai mudar novamente.