Para los tipos de eventos de usuario, los más utilizados son el mouse, el teclado y el navegador.
1. Evento del mouse:
Todos los eventos del mouse se usan con frecuencia. Los siguientes ejemplos se utilizan para probar varios eventos del mouse.
La copia del código es la siguiente:
<script language = "javaScript">
Function Handle (Oevent) {
var disp = document.getElementById ("display");
if (window.event) oevent = window.event; // manejar la compatibilidad y obtener el objeto
disp.innerhtml + = "Nombre del evento del mouse:" + oevent.type + "<br>";
}
window.onload = function () {
var op = document.getElementById ("Box");
op.onmousedown = mango;
op.onmouseover = manejar;
op.onmouseUp = handle;
op.onmouseOut = Handle;
OP.OnClick = Handle;
op.ondblClick = Handle;
}
</script>
<div>
<div id = "box">
Contenido de caja
</div>
<p id = "visualización"> </p>
</div>
Prueba de botón de valor de llave del mouse (con tabla de referencia)
La copia del código es la siguiente:
<script language = "javaScript">
function testClick (oevent) {
var odiv = document.getElementById ("display");
if (window.event)
oevent = window.event;
odiv.innerhtml += oevent.button; // emitir el valor del botón
}
document.onMousEdown = testClick;
Window.Onload = testClick; // La prueba no ha presionado ninguna tecla
</script>
<div>
<p id = "visualización"> </p>
</div>
2. Eventos de teclado
No hay muchos tipos de eventos de teclado, solo tres tipos de eventos.
Keydown (presione una tecla, presione y mantenga presionado, continuará activando)
KeyPress (activado cuando se presiona una tecla y se genera un carácter, es decir, ignora las teclas de función como Shift, Alt, Ctrl)
clave (activado cuando se libera una tecla)
Ejemplo de escucha del teclado:
La copia del código es la siguiente:
<script language = "javaScript">
Function Handle (Oevent) {
if (window.event) oevent = window.event; // manejar la compatibilidad y obtener el objeto de evento
var odiv = document.getElementById ("display");
odiv.innerhtml + = oevent.type + ""; // Nombre del evento de salida
}
window.onload = function () {
var oTextarea = document.getElementById ("textin");
oTexTarea.OnKeydown = Handle; // Escucha todos los eventos de teclado
oTexTarea.OnKeyUp = Handle;
oTexTarea.OnKeyPress = Handle;
}
</script>
<div>
<Textarea Rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "visualización"> </p>
</div>
Para el teclado, lo más importante no es el nombre del evento, sino qué tecla se presiona. Dado que IE no tiene una propiedad de CharCode, el código de teclas es el mismo que el código de teclas DOM estándar solo cuando ocurren los eventos de tecla y clave.
En los eventos KeyPress, se utiliza el siguiente método.
La copia del código es la siguiente: oevent.charcode = (oevent.type == "KeyPress")? Oevent.KeyCode :();
La razón por la cual no se adopta KeyCode es porque representa teclas de teclado, no caracteres de salida. Por lo tanto, la salida "A" y "A", el código clave es equivalente, y los caracteres se distinguen por caracteres.
Además, en KeyPress, el valor de código clave del DOM estándar es siempre 0;
Ejemplo: Propiedades relacionadas de los eventos de teclado:
La copia del código es la siguiente:
<script language = "javaScript">
Function Handle (Oevent) {
var odiv = document.getElementById ("display");
if (window.event) oevent = window.event; // manejar la compatibilidad y obtener el objeto de evento
// Establecer el valor de IE Charcode
oevent.charcode = (oevent.type == "KeyPress")? oevent.keycode: 0;
odiv.innerhtml + = oevent.type + ": charcode" + oevent.charcode + "keycode" + oevent.keycode + "<br>"; // prueba de salida
}
window.onload = function () {
var oTextarea = document.getElementById ("textin");
oTexTarea.OnKeydown = Handle; // Escucha todos los eventos de teclado
oTexTarea.OnKeyPress = Handle;
}
</script>
<div>
<Textarea Rows = "4" cols = "50" id = "textin">
</textarea>
<p id = "visualización"> </p>
</div>
3. Evento HTM
Para los navegadores, varios eventos HTML tienen sus propios eventos, y algunos de ellos a menudo están expuestos por usuarios, como carga, error, selección, etc. Los eventos HTML de uso común son los siguientes:
El evento de carga es uno de los eventos de uso común, porque el marco DOM no se ha construido antes de que se complete la carga de la página, por lo que no pueden ocurrir operaciones relacionadas.
Asigne la carga a los objetos de la ventana, el evento de descarga es equivalente a los métodos de Onload y OnUnload marcados por <Body>.