Objeto del evento: (El objeto del evento es una propiedad del objeto de la ventana. Cuando ocurre un evento, el objeto de evento se genera al mismo tiempo. El evento finaliza y el objeto de evento desaparece)
Es decir: window.event; // Obtener objeto
En DOM: Argumento [0]; // Obtener objeto
Métodos de atributo comunes para objetos de eventos en IE:
1.Clientx: Cuando ocurre el evento, la coordenada x del puntero del mouse en el área del cliente (excluyendo barras de herramientas, barras de desplazamiento, etc.);
2. Clienty: cuando ocurre un evento, la coordenada y del puntero del mouse en el área del cliente (excluyendo barras de herramientas, barras de desplazamiento, etc.);
3.Keycode: para el evento de código de teclas, indica el carácter unicode de la tecla presionada, y para el evento de tecla/tecla, indica que el teclado presionado es un indicador numérico (obtiene el valor de la tecla);
4.OffSetX: la coordenada x del puntero del mouse en relación con el objeto que causó el evento;
5.OffSety: la coordenada y del puntero del mouse en relación con el objeto que causó el evento;
6.Celementement: el elemento que hace que ocurra el evento;
Métodos de atributo comunes para objetos de eventos en DOM:
1.Clientx;
2. Clienty;
3.Pagex; la coordenada x del puntero del mouse en relación con la página;
4.Pagey; La coordenada y del puntero del mouse en relación con la página;
5.Stoppropagation: Llamar a este método puede evitar una mayor propagación de eventos (burbujeo);
6.Target: elemento/objeto de evento activado;
7.Type: el nombre del evento;
Las similitudes y diferencias entre dos objetos de eventos :
Similitudes:
1. Obtenga el tipo de evento;
2. Obtenga el código de teclado (evento Keydown/KeyUp);
3. Detectar Shift, Alt, Ctrl;
4. Obtenga las coordenadas del área del cliente;
5. Obtenga coordenadas de pantalla;
Diferencias:
1. Obtenga el objetivo;
// es decir: var otarget = oevent.srcelement;
// dom: var otarget = oevent.target;
2. Obtenga el código de caracteres;
// es decir: var iCharcode = oevent.keycode;
// DOM: var iCharcode = oevent.charcode;
3. El comportamiento predeterminado de los eventos de bloqueo;
// es decir: oevent.returnValue = false;
// dom: oevent.preventDefault;
4. Deja de burbujear:
//Ie:oevent.cancelbubble=true;
//Dom:oevent.stoppropagation
Tipo de evento:
1. Evento del mouse:
OnMouseOver: cuando se mueve el mouse;
OnmouseOut: cuando se mueve el mouse;
onmousedown: cuando se presiona el mouse;
OnmouseUp: cuando se eleva el mouse;
OnClick: al hacer clic en el botón izquierdo del mouse;
OnDBlClick: cuando haga doble clic en el botón izquierdo del mouse;
2. Eventos de teclado:
OnKeydown: ocurre cuando el usuario presiona una tecla en el teclado;
OnKeyUp: ocurre cuando el usuario libera una tecla presionada;
KeyPress: cuando el usuario sigue presionando la tecla;
Tres.html eventos:
Onload: al cargar la página;
OnUnload: al desinstalar la página;
Abortar: si el usuario no se ha reproducido completamente antes de que termine el proceso de carga, el evento de abortes ocurrirá si no se ha reproducido por completo.
Error: el evento generado cuando ocurre un error en JavaScript;
Seleccionar: el evento Seleccionar activado cuando el usuario selecciona un carácter en una entrada o TextAREA
Cambio: en una entrada o TextARea, cuando pierde el enfoque, el evento de cambio se activa en Seleccionar
Envío: Cuando se envía el formulario, se activa el evento de envío;
Restablecer: Restablecer
Cambiar el tamaño: el evento que se activa cuando la ventana o el marco se redimensionan;
Scroll: eventos disparados cuando el usuario se desplaza o tiene barras de desplazamiento;
Enfoque: cuando se pierde el enfoque;
Blur: cuando te enfocas;
Modelo de evento JavaScript
1.
2. Tipo de captura: <input type = "botón"> Cuando el usuario hace clic en el botón: ventana-document-html-body-entrada (de arriba a abajo)
Después de la estandarización de ECMA, otros navegadores admiten dos tipos, y la captura ocurre primero.
2. Tres formas de escribir eventos tradicionales:
1. <input type = "button" onClick = "alert ('helloworld!')">
2. <input type = "button onClick = name1 ()"> ====== <script> function name1 () {alerta
3. <input type = "button" id = "input1"> // función anónima
La copia del código es la siguiente:
<script>
Var button1 = document.getElementById ("input1");
Button1.OnClick = Fundtion () {
alerta ('¡Helloword!')
}
</script>
3. Método de escritura de eventos modernos:
La copia del código es la siguiente:
<input type = "button" id = "input1"> // Agregar eventos en IE
<script>
var fnClick () {
alerta ("Fui clic")
}
var oinput = document.getElementById ("input1");
Oinput.attachevent ("onclick", fnclick);
--------------------------------------
Oinput.detachevent ("onClick", fnclick); // Eliminar evento en IE
</script>
La copia del código es la siguiente:
<input type = "button" id = "input1"> // Agregar eventos en DOM
<script>
var fnClick () {
alerta ("Fui clic")
}
var oinput = document.getElementById ("input1");
Oinput.AdDeventListener ("onClick", fnClick, true);
--------------------------------------
Oinput.removeEventListener ("onClick", fnclick); // Eliminar evento en DOM
</script>
La copia del código es la siguiente:
<input type = "button" id = "input1"> // Compatible con los eventos de adición de IE y DOM
<script>
var fnClick1 = function () {alert ("Fui clic")}
var fnClick2 = function () {alert ("Fui clic")}
var oinput = document.getElementById ("input1");
if (document.attachevent) {
Oinput.attachevent ("onclick", fnclick1)
Oinput.attachevent ("onclick", fnclick2)
}
else (document.addeventListener) {
Oinput.addeventListener ("hacer clic", fnclick1, verdadero)
Oinput.addeventListener ("hacer clic", fnclick2, verdadero)
}
</script>