Para os tipos de eventos do usuário, os mais usados são mouse, teclado e navegador.
1. Evento do mouse:
Todos os eventos do mouse são frequentemente usados. Os exemplos a seguir são usados para testar vários eventos do mouse.
A cópia do código é a seguinte:
<Script Language = "JavaScript">
identificador de função (oevent) {
var dis = document.getElementById ("display");
if (window.event) oevent = window.event; // lide com compatibilidade e obtenha o objeto
disp.innerhtml + = "Nome do evento do mouse:" + oevent.type + "<br>";
}
window.onload = function () {
var op = document.getElementById ("caixa");
op.onMousedown = Handle;
op.onMouseOver = Handle;
op.onMouseUp = Handle;
op.onMouseOut = Handle;
op.OnClick = Handle;
op.ondblClick = handle;
}
</script>
<div>
<div id = "Box">
Conteúdo da caixa
</div>
<p id = "display"> </p>
</div>
Teste de botão de valor-chave do mouse (com tabela de referência)
A cópia do código é a seguinte:
<Script Language = "JavaScript">
função testclick (oevent) {
var odiv = document.getElementById ("display");
if (window.event)
oEvent = window.event;
odiv.innerhtml += oevent.button; // emitir o valor do botão
}
document.onMousedown = testClick;
window.onload = testClick; // O teste não pressionou nenhuma chave
</script>
<div>
<p id = "display"> </p>
</div>
2. Eventos de teclado
Não existem muitos tipos de eventos de teclado, apenas três tipos de eventos.
KeyDown (pressione uma tecla, pressione e segure, continuará acionando)
KeyPress (acionado quando uma tecla é pressionada e um caractere é gerado, ou seja, ignora as teclas de função como Shift, Alt, Ctrl)
KeyUp (acionado quando uma chave é liberada)
Exemplo de escuta do teclado:
A cópia do código é a seguinte:
<Script Language = "JavaScript">
identificador de função (oevent) {
if (window.event) oevent = window.event; // manipular compatibilidade e obter objeto de evento
var odiv = document.getElementById ("display");
odiv.innerhtml + = oevent.type + ""; // Nome do evento de saída
}
window.onload = function () {
var otextarea = document.getElementById ("textin");
OTEXTAREA.ONKEYdown = Handle; // Ouça todos os eventos do teclado
otextarea.onkeyup = handle;
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea linhas = "4" cols = "50" id = "textin">
</sexttarea>
<p id = "display"> </p>
</div>
Para o teclado, o mais importante não é o nome do evento, mas que tecla é pressionada. Como o IE não possui uma propriedade Charcode, o KeyCode é o mesmo que o código de chave DOM padrão somente quando ocorrem os eventos KeyDown e KeyUp.
Nos eventos KeyPress, o método a seguir é usado.
A cópia do código é a seguinte: oEvent.CharCode = (OEvent.Type == "KeyPress")? OEvent.KeyCode :();
A razão pela qual o KeyCode não é adotado é porque representa teclas de teclado, não caracteres de saída. Portanto, a saída "A" e "A", o código de chave é equivalente e o Charcode é distinguido por caracteres.
Além disso, no KeyPress, o valor do código -chave do DOM padrão é sempre 0;
Exemplo: Propriedades relacionadas dos eventos do teclado:
A cópia do código é a seguinte:
<Script Language = "JavaScript">
identificador de função (oevent) {
var odiv = document.getElementById ("display");
if (window.event) oevent = window.event; // manipular compatibilidade e obter objeto de evento
// Defina o valor do IE Charcode
oEvent.CharCode = (OEvent.Type == "KeyPress")? oEvent.KeyCode: 0;
odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>"; // Teste de saída
}
window.onload = function () {
var otextarea = document.getElementById ("textin");
OTEXTAREA.ONKEYdown = Handle; // Ouça todos os eventos do teclado
otextarea.onkeypress = handle;
}
</script>
<div>
<textarea linhas = "4" cols = "50" id = "textin">
</sexttarea>
<p id = "display"> </p>
</div>
3.htm evento
Para os navegadores, vários eventos HTML têm seus próprios eventos, e alguns deles são frequentemente expostos pelos usuários, como carga, erro, seleção etc. Os eventos HTML comumente usados são os seguintes:
O evento de carga é um dos eventos comumente usados, porque a estrutura do DOM não foi construída antes da conclusão do carregamento da página, para que nenhuma operação relacionada possa ocorrer.
Atribuir carga aos objetos da janela, o evento de descarga é equivalente aos métodos de Onload e Onunload marcados pelo <body>.