los eventos de la página
: ¿en qué orden se cargan las páginas HTML?
Respuesta: La página se carga de arriba a abajo en el orden en que se escribe el código.
Problemas que pueden ocurrir : si se utiliza JavaScript para operar elementos DOM antes de cargar la página, se producirán errores de sintaxis.
Solución : los eventos de la página pueden cambiar el tiempo de ejecución del código JavaScript.
Eventos de enfoque
En el desarrollo web, los eventos de enfoque se utilizan principalmente para funciones de validación de formularios y son uno de los eventos más utilizados.
Por ejemplo, cambiar el estilo del cuadro de texto cuando el cuadro de texto recibe el foco, validar los datos ingresados en el cuadro de texto cuando el cuadro de texto pierde el foco, etc.
Para que todos comprendan mejor cómo usar los eventos de enfoque, la siguiente es una demostración para verificar si el nombre de usuario y la contraseña están vacíos.
Implementación de código
<!DOCTYPE html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Verifique que el nombre de usuario y la contraseña estén vacíos</title>
<estilo>
cuerpo{fondo:#ddd;}
.box{fondo:#fff;padding:20px 30px;width:400px;margin: 0 auto;text-align:center;}
.btn{ancho:180px;alto:40px;fondo:#3388ff;borde:1px sólido #fff;color:#fff;tamaño de fuente:14px;}
.ipt{ancho:260px;relleno:4px 2px;}
.tips{ancho:440px;alto:30px;margen:5px automático;fondo:#fff;color:rojo;borde:1px sólido #ccc;display:none;line-height:30px;padding-left:20px;font- tamaño: 13px;}
</estilo>
</cabeza>
<cuerpo>
<p id="consejos" class="consejos"></p>
<p clase="caja">
<p><label>Nombre de usuario: <input id="user" class="ipt" type="text"></label></p>
<p><label>Contraseña: <input id="pass" class="ipt" type="contraseña"></label></p>
<p><button id="login" class="btn">Iniciar sesión</button></p>
</p>
<guión>
ventana.onload = función() {
addBlur($('user')); // Verifica si el valor está vacío después de que el elemento con la identificación del usuario pierda el foco. addBlur($('pass')); la identificación del pase pierde el foco. Si el valor está vacío};
function $(obj) { // Obtiene el elemento especificado según la identificación return document.getElementById(obj);
}
function addBlur(obj) { // Agrega un evento de pérdida de enfoque para el elemento especificado obj.onblur = function() {
está vacío (esto);
};
}
function isEmpty(obj) { // Comprobar si el formulario está vacío if (obj.value === '') {
$('consejos').style.display = 'bloque';
$('tips').innerHTML = 'Nota: ¡El contenido de entrada no puede estar vacío';
} demás {
$('consejos').style.display = 'ninguno';
}
}
</script>
</cuerpo>
</html> Eventos de mouse
Los eventos de mouse son los eventos más utilizados en el desarrollo web.
Por ejemplo, cambiar el contenido que se muestra en la barra de pestañas cuando el mouse se desliza usando el mouse para arrastrar el cuadro de estado para ajustar su posición de visualización, etc. Todos estos efectos comunes de páginas web usan eventos de mouse.
En el desarrollo de proyectos, a menudo están involucrados algunos atributos del mouse de uso común, que se utilizan para obtener la información de la posición actual del mouse.
Los atributos pageX y pageY no son compatibles en los navegadores IE6-8. Por lo tanto, se requiere compatibilidad con los navegadores IE6~8 durante el desarrollo del proyecto.
Las coordenadas del mouse en el documento son iguales a las coordenadas del mouse en la ventana actual más la longitud del texto que pasa por la barra de desplazamiento.
Para que todos comprendan mejor el uso de los eventos del mouse, tomemos como ejemplo la visualización circular de la posición del clic del mouse.
Implementación de código
<!DOCTYPE html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Mostrar posición del clic del mouse</title>
<estilo>
.mouse{posición:absoluta;fondo:#ffd965;ancho:40px;alto:40px;radio-borde:20px;}
</estilo>
</cabeza>
<cuerpo>
<p id="ratón" clase="ratón"></p>
<guión>
var ratón = document.getElementById('ratón');
//Requisito: cuando el mouse hace clic en la página, obtenga la posición del clic y muestre un pequeño punto document.onclick = function(event) {
// Obtener el procesamiento compatible del objeto de evento var event = event || window.event;
// La posición del mouse en la página var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.páginaY || evento.clientY + document.documentElement.scrollTop;
// Calcula la posición donde se debe mostrar <p> var targetX = pageX - mouse.offsetWidth / 2;
var targetY = páginaY - mouse.offsetHeight / 2;
// Muestra <p> en la ubicación en la que se hace clic con el mouse
mouse.style.display = 'bloquear';
mouse.style.left = targetX + 'px';
mouse.style.top = objetivoY + 'px';
};
</script>
</cuerpo>
</html> [Caso] Efectos de arrastre del mouse
La posición del cuadro (valores izquierdo y superior) = la posición del mouse (valores izquierdo y superior) - la distancia entre el mouse y el cuadro (valores izquierdo y superior) cuando se presiona el mouse.
dar un ejemplo
Ideas de implementación de código :
① Escriba HTML y diseñe cuadros emergentes para implementar efectos de arrastrar y soltar.
② Agregue el evento mousedown y su controlador a la barra de arrastre.
③ Maneje los eventos de movimiento del mouse para lograr efectos de arrastre del mouse.
④ Maneje el evento de soltar el botón del mouse para que el cuadro emergente ya no se mueva después de soltar el botón del mouse.
Implementación de código
<!DOCTYPE html>
<html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Arrastrar con el mouse</title>
<estilo>
cuerpo {margen: 0}
.box{ancho:400px;alto:300px;borde:5px sólido #eee;box-shadow:2px 2px 2px 2px #666;posición:absoluta;arriba:30%;izquierda:30%}
.hd{ancho:100%;alto:25px;color de fondo:#7c9299;borde-inferior:1px sólido #369;alto de línea:25px;color:#fff;cursor:move}
#box_close{float:derecha;cursor:puntero}
</estilo>
</cabeza>
<cuerpo>
<p id="caja" clase="caja">
<p id="soltar" clase="hd">
Información de registro (se puede arrastrar y soltar)
<span id="box_close">【Cerrar】</span>
</p>
<p clase="bd"></p>
</p>
<guión>
// Obtener el cuadro arrastrado y arrastrar la tira var box = document.getElementById('box');
var soltar = document.getElementById('soltar');
drop.onmousedown = function(event) { // Presione el mouse en la barra de arrastre para arrastrar el cuadro var event = event ||
// Obtener la posición cuando se presiona el mouse var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.páginaY || evento.clientY + document.documentElement.scrollTop;
// Calcula la posición en la que se hizo clic con el mouse desde el cuadro var spaceX = pageX - box.offsetLeft;
var espacioY = páginaY - box.offsetTop;
document.onmousemove = function(event) { // Obtenga la posición del mouse cuando se mueve. Todo el cuadro sigue la posición del mouse var event = event ||
// Obtener la posición del mouse después del movimiento var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var páginaY = evento.páginaY || evento.clientY + document.documentElement.scrollTop;
// Calcula y establece la posición del cuadro después del movimiento box.style.left = pageX - spaceX + 'px';
box.style.top = páginaY - espacioY + 'px';
};
};
document.onmouseup = function() {// Cancelar el movimiento del cuadro cuando se suelta el botón del mouse document.onmousemove = null;
};
</script>
</cuerpo>
</html> Eventos de teclado
Los eventos de teclado se refieren a eventos que se activan cuando el usuario usa el teclado.
Por ejemplo, el usuario presiona la tecla Esc para cerrar la barra de estado abierta y presiona la tecla Enter para cambiar directamente el cursor hacia arriba y hacia abajo, etc.
A continuación se demuestra el uso del cambio de tecla Enter. Los detalles son como se muestran en el ejemplo.
Implementación de código
<!DOCTYPE html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Presione Enter para cambiar</title>
</cabeza>
<cuerpo>
<p>Nombre de usuario: <tipo de entrada="texto"></p>
<p>Correo electrónico: <input type="text"></p>
<p>Número de teléfono móvil: <input type="text"></p>
<p>Descripción personal: <input type="text"></p>
<guión>
var entradas = document.getElementsByTagName('entrada');
para (var i = 0; i < entradas.longitud; ++i) {
entradas[i].onkeydown = función(e) {
// Obtener el procesamiento compatible del objeto de evento var e = event || window.event;
// Determina si la tecla presionada es Enter. Si es así, deja que la siguiente entrada se enfoque if (e.keyCode === 13) {
// Recorre todos los cuadros de entrada y encuentra el subíndice de la entrada actual para (var i = 0; i < inputs.length; ++i) {
si (entradas[i] === esto) {
// Calcular el índice del siguiente elemento de entrada var index = i + 1 >= inputs.length 0 : i + 1;
romper;
}
}
// Si la siguiente entrada sigue siendo un cuadro de texto, obtiene el foco del teclado if (inputs[index].type === 'text') {
inputs[index].focus(); // Activar evento de enfoque }
}
};
}
</script>
</cuerpo>
</html> Tenga en cuenta que
los valores clave guardados en el evento de pulsación de tecla son códigos ASCII, y
los valores clave guardados en los eventos keydown y keyup son códigos de clave virtuales.
Para obtener más información, consulte manuales como MDN.
Los eventos deformulario
se refieren a eventos que ocurren al operar formularios web.
Por ejemplo, verificación del formulario antes del envío, operación de confirmación cuando se restablece el formulario, etc. JavaScript proporciona eventos de formulario relacionados.
A continuación se muestra si se deben enviar y restablecer los datos del formulario como ejemplo. Los detalles son como se muestran en el ejemplo.
Implementación de código
<!DOCTYPE html>
<cabeza>
<meta juego de caracteres="UTF-8">
<title>Eventos de formulario</title>
</cabeza>
<cuerpo>
<formulario id="registro">
<label>Nombre de usuario: <input id="usuario" tipo="texto"></label>
<tipo de entrada="enviar" valor="Enviar">
<tipo de entrada="reiniciar" valor="Reiniciar">
</formulario>
<guión>
// Obtenga los objetos de formulario y elemento que deben verificarse var regist = document.getElementById('register');
var usuario = document.getElementById('usuario');
regist.onsubmit = function(event) { // Agregar un evento de envío al formulario // Obtener el objeto del evento y generar el tipo de evento actual var event = event ||
console.log(evento.tipo);
// Determina si el contenido del elemento del formulario está vacío. Si está vacío, devuelve falso; de lo contrario, devuelve verdadero.
devolver valor.usuario verdadero: falso;
};
regist.onreset = function (event) { // Agregar un evento de reinicio al formulario // Obtener el objeto de evento y generar el tipo de evento actual var event = event ||
console.log(evento.tipo);
// Determine si desea confirmar el reinicio, presione "Aceptar" para devolver verdadero, presione "Cancelar" para devolver falso
return confirm('Confirme si desea restablecer la información. Después del restablecimiento, se borrará todo el contenido completado en el formulario');
};
</script>
</cuerpo>
</html> Análisis práctico
del efecto de ampliación de imagen
Cómo implementar el efecto de ampliación de imagen:
① Prepare dos imágenes idénticas, una imagen pequeña y una imagen grande.
② La miniatura se muestra en el área de visualización del producto.
③ La imagen grande se utiliza para mostrar el área correspondiente en la imagen grande proporcionalmente cuando el mouse se mueve sobre la imagen pequeña.
Ideas de implementación de código :
① Escriba una página HTML para mostrar imágenes pequeñas, máscaras que oculten el mouse e imágenes grandes.
② Cuando el mouse se mueve sobre la imagen pequeña, se muestran la máscara del mouse y la imagen grande.
③ Cuando se mueva el mouse, deje que la máscara se mueva en la imagen pequeña.
④ Limite el rango de movimiento de la máscara en la imagen pequeña.
⑤ Muestre la imagen grande proporcionalmente según la cobertura de la máscara en la imagen pequeña.