Objeto de evento: (o objeto de evento é uma propriedade do objeto da janela. Quando ocorre um evento, o objeto de evento é gerado ao mesmo tempo. O evento termina e o objeto de evento desaparece)
Ou seja: window.event; // obtenha objeto
Em dom: argumento [0]; // obtenha objeto
Métodos de atributo comum para objetos de evento no IE:
1.ClientX: quando o evento ocorre, a coordenada X do ponteiro do mouse na área do cliente (excluindo barras de ferramentas, barras de rolagem, etc.);
2.Clienty: Quando ocorre um evento, a coordenada Y do ponteiro do mouse na área do cliente (excluindo barras de ferramentas, barras de rolagem, etc.);
3.KeyCode: para o evento KeyCode, indica o caractere unicode da tecla pressionado e, para o evento KeyDown/KeyUp, indica que o teclado pressionado é um indicador numérico (obtém o valor da tecla);
4.OffSetX: a coordenada x do ponteiro do mouse em relação ao objeto que causou o evento;
5.Offsety: a coordenada Y do ponteiro do mouse em relação ao objeto que causou o evento;
6.SrELEMENT: O elemento que faz com que o evento ocorra;
Métodos de atributo comum para objetos de evento em DOM:
1.ClientX;
2.Clienty;
3.Pagex; a coordenada X do ponteiro do mouse em relação à página;
4.Pagey; a coordenada Y do ponteiro do mouse em relação à página;
5.STOPPROPAGAÇÃO: Chamar esse método pode impedir a propagação adicional de eventos (borbulhantes);
6.Target: elemento de evento acionado/objeto;
7.Type: o nome do evento;
As semelhanças e diferenças entre dois objetos de evento :
Semelhanças:
1. Obtenha o tipo de evento;
2. Obtenha o código do teclado (evento KeyDown/KeyUp);
3. Detectar turno, alt, ctrl;
4. Obtenha as coordenadas da área do cliente;
5. obter coordenadas de tela;
Diferenças:
1. Obtenha o alvo;
// ou seja: var otarget = oEvent.srceLement;
// dom: var otarget = oevent.target;
2. Obtenha o código do caractere;
// ie: var iCharcode = oEvent.KeyCode;
// DOM: var iCharcode = oEvent.CharCode;
3. O comportamento padrão dos eventos de bloqueio;
// ou seja: oevent.returnValue = false;
// dom: oevent.preventDefault;
4. Pare de borbulhar:
//Ie:oevent.cancelbubble=True;
//DOM:oEvent.StopPropagation
Tipo de evento:
1. Evento do mouse:
OnMouseOver: quando o mouse é movido;
OnMouseOut: Quando o mouse é movido;
OnMousedown: Quando o mouse é pressionado;
OnMouseUp: quando o mouse é criado;
OnClick: ao clicar no botão esquerdo do mouse;
ONDBLCLICK: Ao clicar duas vezes no botão esquerdo do mouse;
2. Eventos de teclado:
OnKekydown: ocorre quando o usuário pressiona uma tecla no teclado;
OnKeyUp: ocorre quando o usuário libera uma tecla pressionada;
KeyPress: quando o usuário continua pressionando a tecla;
Eventos de três.html:
Onload: ao carregar a página;
OnUnload: ao desinstalar a página;
Abortar: Se o usuário não tiver sido totalmente reproduzido antes do fim do processo de carregamento, o evento de aborto ocorrerá se ele não tiver sido completamente reproduzido.
Erro: o evento gerado quando ocorre um erro no JavaScript;
Selecione: O evento selecione acionado quando o usuário selecionar um caractere em uma entrada ou textarea
Mudança: Em uma entrada ou textarea, quando perde o foco, o evento de mudança é acionado em selecionamento
Enviar: Quando o formulário é enviado, o evento de envio é acionado;
Redefinir: Redefinir
REDIMENTE: O evento que é acionado quando a janela ou quadro é redimensionada;
Rolagem: eventos disparados quando o usuário rola ou tem barras de rolagem;
Foco: quando o foco é perdido;
Blur: Quando você obtém foco;
Javascript Event Model
1. Javascript Event Model: 1. Tipo de bolha: <input type = "Button"> Quando o usuário clica no botão: entrada-corpo-html-document-window (bolha de baixo para cima), ou seja, o navegador usa apenas bolha
2. Tipo de captura: <input type = "Button"> Quando o usuário clica no botão: Window-document-html-corpo-entrada (de cima para baixo)
Após a padronização da ECMA, outros navegadores suportam dois tipos e a captura ocorre primeiro.
2. Três maneiras de escrever eventos tradicionais:
1. <input type = "button" onclick = "alert ('helloworld!')">
2. <input type = "Button OnClick = name1 ()"> ====== <<SCRIPT> função name1 () {alert ('helloword!');} </sCript> // função de nome
3. <input type = "button" id = "input1"> // função anônima
A cópia do código é a seguinte:
<Cript>
Var button1 = document.getElementById ("input1");
Button1.OnClick = Função () {
Alerta ('Helloword!')
}
</script>
3. Método moderno de redação de eventos:
A cópia do código é a seguinte:
<input type = "button" id = "input1"> // Adicionar eventos no IE
<Cript>
var fnClick () {
alerta ("eu fui clicado")
}
var oinput = document.getElementById ("input1");
Oinput.attachevent ("OnClick", fnClick);
----------------------------------------
Oinput.detachevent ("OnClick", fnClick); // Evento de exclusão no IE
</script>
A cópia do código é a seguinte:
<input type = "button" id = "input1"> // Adicionar eventos no DOM
<Cript>
var fnClick () {
alerta ("eu fui clicado")
}
var oinput = document.getElementById ("input1");
Oinput.addeventListener ("OnClick", fnClick, true);
----------------------------------------
Oinput.removeEventListener ("OnClick", fnClick); // Evento de exclusão no DOM
</script>
A cópia do código é a seguinte:
<input type = "button" id = "input1"> // compatível com eventos de adição do IE e DOM
<Cript>
var fnClick1 = function () {alert ("eu fui clicado")}
var fnClick2 = function () {alert ("eu fui clicado")}
var oinput = document.getElementById ("input1");
if (document.attachevent) {
Oinput.attachevent ("OnClick", fnClick1)
Oinput.attachevent ("OnClick", fnClick2)
}
else (document.addeventlistener) {
Oinput.addeventListener ("clique", fnClick1, true)
Oinput.addeventListener ("clique", fnClick2, true)
}
</script>