Evento simple
Caso 1: Cuando el mouse se mueve, la posición del mouse (coordenadas) se muestra en el cuadro de texto de entrada.
Onmousemove: Cuando el mouse se mueve, se activa
document.οnmοusemοve = function () {cuerpo de la función (qué hacer después de mover )}
objeto de evento (parámetro de función): cuando se activa la función de respuesta de evento, el navegador pasará un objeto de evento como un parámetro real a la función de respuesta cada vez (función () {}, también llamada función de devolución de llamada)
document.οnmοusemοve = function (parámetro formal (Establecer cuando se reciben parámetros)) {cuerpo de la función (qué hacer después de mover)}
El parámetro de posición de movimiento después del movimiento del mouse ejecutado aquí se encapsulará en el parámetro formal. El parámetro formal de evento aquí tiene muchas funciones incorporadas atributos
document. οnmοusemοve = function (x) { var a = x.clientX; var b = x.clientY; input.value = "x:" + a + "; y:" + b; (mostrar coordenadas en el cuadro de texto ) }
Caso 2: Mueva el mouse para dejar que el cuadro siga al mouse
var box = document.getElementById ("box")
(box) document.οnmοusemοve = function (x) {(El objeto en movimiento no es el documento, sino el div del documento, para que el mouse esté fuera de la caja. Entonces no se moverá con él, por lo que es mejor vincular el documento)
var a = x.clienX;
var b = x.clientY;
box.style.left = a + " px ";
box.style.top = b +" px ";
}
Var a = x.clienX; var a = x.clien.pageX;
var b = x.clientY; (usado para obtener las coordenadas del mouse en el ventana visible) var b = x.client.pageY (usado para obtener el mouse relativo a las coordenadas de la página actual)
Caso 3:
1. Cuando se presiona el mouse sobre el elemento arrastrado, comience a arrastrar
onmousedown
2. Cuando el mouse se mueve, el elemento arrastrado se mueve con el mouse
onmousemove
3. Cuando se suelta el mouse, el elemento arrastrado se fija en la posición actual
onmouseup se
coloca en el caso 2 onmousedown para anidar onmousemove,
y luego se libera, el cuerpo de la función fija del elemento es document.οnmοusemοve = null, es decir, onmouseup nesting document.οnmοusemοve = null se
mueve a la posición de otras cajas y libera , Estará cubierto por otros cuadros.
Para que el resultado sea significativo, el comando cancel release document.οnmοuseup = null debe agregarse al cuerpo de la función cuando se suelta el mouse, y se cancela junto con la función de arrastrar y soltar, que es un evento único
Optimización: Utilice el mouse como punto central durante el proceso de arrastre, en lugar de la esquina superior izquierda
1. Encuentre el desplazamiento div
2. El valor X del mouse — el valor izquierdo del elemento
3. El valor Y del mouse — el valor superior del elemento
4. Agregue la estructura de función var c = x.clientX — box.offsetLeft
var d = x.clientY — box.offsetTop
y luego cambie box.style.left = a + "px"; conviértase en box.style. izquierda = a + "px" —C;
box.style.top = b + "px"; box.style.top = b + "px" —d;
Caso 4:
Configuración del evento de la rueda del mouse (problema de compatibilidad con el navegador) . Cuando la rueda del mouse se desplaza hacia abajo, el cuadro se alarga, y cuando la rueda del mouse se desplaza hacia arriba, el cuadro se acorta. El objeto de evento de desplazamiento (parámetro) también tiene sus propiedades integradas wheelDelta,
desplazarse hacia arriba dará un encapsulado de parámetro positivo, por lo que se puede aplicar al cuadro de evento de rueda para cambiar el cuadro de longitud.
onmousewheel = function { (> 0 demuestra que está arriba) if (x.wheelDelta > 0) { box.style.height = box.clientHeight — 10 + "px" } else {box.style.height = box.clientHeight + 10 + "px" return false (cancela el comportamiento predeterminado) } } Cuando el desplazamiento la rueda se desplaza, si el navegador tiene una barra de desplazamiento, desplácese con el navegador cuando se desplaza. Este es el comportamiento predeterminado del navegador. Si no desea que suceda, puede cancelar el comportamiento predeterminado. Puede agregar return false al cuerpo de la función.
Usado en Firefox: la sintaxis es box.addEventListener ("DOMMOUSEScroll", function () {}, false)
Caso 5: Eventos de teclado Los eventos de
teclado generalmente están vinculados a algunos objetos que pueden obtener el foco (como el cuadro de texto donde el cursor parpadea), o el objeto de documento.
Presione el teclado: onkeydown y
suelte el teclado: onkeyup
event object of el evento del teclado La propiedad incorporada keyCode puede verificar qué tecla se presiona, pero la retroalimentación es el código de la tecla correspondiente.Establezca
qué tecla para retroalimentar qué información puede ser document.οnkeydοwn = function (x) { if (x.keyCode
67) { console.log ("xixixix") } } para juzgar si presionas ctrl + c, pon la fórmula anterior if (x.keyCode
67) Cambiar a if (x.keyCode == 67 && x.ctrlKey)
Además del código de tecla, el objeto de evento también proporciona varios atributos integrados: altKey ctrlKey shiftKey puede determinar si se presiona alt ctrl shift o no
si se presiona Devuelve verdadero, de lo contrario devuelve falso
El objeto Bom (modelo de objetos del navegador)
puede operar el navegador a través de JS. La
estructura incluye los siguientes objetos:
ventana: representa la ventana completa del navegador. Al mismo tiempo, la ventana también es un objeto global en la página web. La
ventana incluye lo siguiente objetos console.log (window .location), en el cuerpo de la función location = "https: //cn.bing.com/? FORM = Z9FD1 ..." Hyperlink
Navigator se puede ejecutar : representa la información del navegador y se pueden ejecutar diferentes navegadores identificado a través de este objeto
Ubicación: dirección, que representa la información de la barra de direcciones del navegador, u operar el navegador para saltar a la página
Historial: representa el historial del navegador, debido a preocupaciones de privacidad, el objeto no puede obtener el historial específico y puede solo opere el navegador para avanzar Después de que
console.log (ventana) vea el objeto de ventana, el
objeto Bom se guarda como un atributo del objeto de ventana. Se puede usar a través del objeto de ventana, o puede usar directamente el
archivo console.log (navigator.userAgent) userAgent es una cadena, este carácter La cadena contiene el contenido utilizado para describir la información del navegador. Los
diferentes navegadores tendrán diferentes agentes de usuario, por lo que puede usar este atributo para determinar la información del navegador. La
ubicación tiene una función correspondiente: actualizar function, location.reload ()
History: alert (History.length) La longitud puede obtener el número de enlaces visitados actualmente (el número de enlaces históricos más un número total de enlaces actuales)
volver () volver a la página anterior
avanzar () saltar a la página siguiente
go () puede saltar a la página especificada, debe pasar un número entero como parámetro, pasar 1, para saltar una página hacia adelante, 2 para saltar hacia adelante dos, -1 y -2 son la
ventana opuesta. regularmente, puede ejecutar una función a intervalos regulares, y el
parámetro es la función de devolución de llamada (la función se llamará una vez a intervalos) + el valor (el tiempo entre cada llamada, en milisegundos)
var h = document.get. . . . . . . . ("")
var num = 1
var timer = window.setInterval (function () {h.innerHTML = num ++ (- cuando se convierte en una cuenta regresiva);}, 1000)
Valor de retorno: devuelve un número, que representa el logotipo del temporizador a
borrar el temporizador: es necesario pasar el identificador de un temporizador como parámetro, para que el temporizador correspondiente se pueda cerrar,
(el nuevo valor no puede ser igual al resultado debe ser mayor que el resultado, de lo contrario, si el resultado de cada incremento no puede ser igual al requisito del temporizador, el temporizador se excederá y el temporizador no se puede borrar. 器)
Puede agregar if (num == 10) {window.clearInterval (timer)} al cuerpo de la función
. La velocidad de la el temporizador se superpondrá después de que el evento se active varias veces. Si no desea superponer
Caso 6: Después de hacer clic en el botón, el div se mueve hacia la derecha
btn.οnclick = function () {box.style.left = 200 + "px"}
Avanzado: Movimiento de intervalo cronometrado después de hacer clic en
btn.οnclick = function () {var timer = setInterval (function () { var oldValue = box.offsetLeft; box.style.left = oldValue + "10px"; }, 1000) } (La limitación de este método es que la posición es fija)
Para determinar la posición muerta, puedes usar la función getstyle para obtener el valor que cambia continuamente. Se
usa para obtener el estilo de un elemento.
Function getstyle (usa esta función incorporada para obtener el estilo) (obj, name ) { var caaobj = getComputedStyle (use este método para obtener todos los estilos) (obj, null); return caaobj [nombre] (el retorno y el nombre del atributo deben estar entre paréntesis; de lo contrario, el valor predeterminado es el valor del atributo) } var left = getstyle (usar y asignar valor) (cuadro, "izquierda") console.log (izquierda) Esto se puede aplicar al caso 6 a btn.οnclick = function () {var timer = setInterval (function () { var oldValue = getstyle (box , "left") (esta función getstyle obtiene un valor px, var ov = window.parseInt (oldValue) Entonces, si quieres sumar y restar, necesitas usar parseInt) var bibi = ov + 10; box.style.left = bibi + "px" }, 1000) } Para mover el elemento a 800px, el temporizador de limpieza deja de moverse, y si (valor nuevo == 800) { clearInterval (temporizador) } se puede agregar al cuerpo de la función
inner + (el texto obtiene el texto HTML obtiene el texto + etiqueta)
setInterval (time2,1000); cada vez que se ejecuta la nueva fecha del sistema de tiempo dado, la hora del sistema se actualizará cada 1 segundo