Texto de entrada de eventos de Javascript. Eventos de objetos y marcos
En esta lección veremos los principales tipos de eventos que puedes interceptar con usando javascript para ejecutar algún código.
Categorías de eventos
Todos los eventos de JavaScript se pueden dividir en las siguientes categorías: Eventos de mouse, Eventos de teclado, Eventos de marco/objeto, Eventos de formulario, Eventos de arrastre, Eventos de animación, Eventos de portapapeles, Eventos multimedia, Eventos de transición, Eventos enviados por el servidor, Eventos táctiles, Eventos de impresión (Imprimir eventos), eventos varios (Eventos varios).
Atención: todos los eventos en JavaScript están escritos en letras minúsculas (pequeñas).
Eventos del mouse
- mousedown: el evento ocurre cuando se presiona el botón del mouse sobre algún elemento, pero aún no se ha soltado.
- mouseup: el evento ocurre cuando el botón del mouse sobre algún elemento pasa del estado presionado al estado liberado.
- clic: el evento ocurre cuando el usuario hace clic con el mouse en el elemento. El orden en que se producen los eventos relacionados con el clic (para izquierda y derecha). botón central mouse): mousedown -> mouseup -> hacer clic.
- menú contextual: el evento ocurre cuando el usuario hace clic clic derecho ratón sobre el elemento. El orden de los eventos asociados con el menú contextual (para el botón derecho del mouse) es mousedown -> mouseup -> contextmenu.
- dblclick: el evento ocurre cuando el usuario hace doble clic en un elemento. El orden de aparición de los eventos asociados con dblclick es: mousedown -> mouseup -> clic -> mousedown -> mouseup -> clic -> dblclick.
- mouseover: el evento ocurre cuando el cursor del mouse ingresa a un área propiedad de un elemento o uno de sus hijos.
- mouseout: el evento ocurre cuando el cursor del mouse sale de un área propiedad de un elemento o uno de sus hijos.
- mousemove: el evento ocurre cuando el cursor del mouse se mueve dentro del área que pertenece al elemento.
- mouseenter: el evento ocurre cuando el puntero del mouse ingresa a un área propiedad de un elemento. Este evento se usa a menudo junto con el evento mouseleave, que ocurre cuando el puntero del mouse abandona el área propiedad de un elemento. El evento mouseenter es similar al evento mouseover y solo se diferencia en que el evento mouseenter no genera burbujas (conoceremos el concepto de evento burbujeante un poco más adelante).
- mouseleave: el evento ocurre cuando el puntero del mouse abandona el área propiedad del elemento. El evento mouseleave es similar al evento mouseout y solo se diferencia en que el evento mouseleave no genera burbujas (conoceremos el concepto de burbujas de eventos un poco más adelante).
Eventos de teclado
El orden de aparición de los eventos es: pulsación de tecla -> pulsación de tecla -> pulsación de tecla.
- keydown: el evento ocurre cuando se presiona una tecla en el teclado encima de un elemento pero aún no se suelta.
- keyup: el evento ocurre cuando una tecla presionada en el teclado encima de un elemento cambia al estado liberado.
- Pulsación de tecla: el evento ocurre cuando el usuario presiona una tecla en el teclado encima de un elemento.
Eventos de objetos y marcos
- beforeunload: el evento ocurre antes de que se descargue el documento. Este evento le permite mostrar mensaje adicional en el cuadro de diálogo de confirmación "¿Está seguro de que desea abandonar esta página?" Mensaje estándar, que aparece al cerrar un documento, puede diferir en diferentes navegadores. Pero no puede cambiarlo ni eliminarlo, solo puede usar este método para agregarle su propio mensaje, que se mostrará junto con el mensaje predeterminado.
- error: el evento se activa cuando ocurre un error durante la carga archivo externo(por ejemplo, un documento o una imagen).
- hashchange: el evento ocurre cuando cambia la parte del ancla (comienza con el símbolo "#") de la URL actual.
- carga: el evento ocurre cuando se completa la carga de un objeto. El evento de carga se usa con mayor frecuencia en el elemento del cuerpo para ejecutar un script inmediatamente después de que la página web se haya cargado por completo.
- descargar: el evento ocurre cuando se descarga una página (por ejemplo, cuando se cierra una pestaña (ventana) del navegador).
- pageshow: el evento ocurre cuando el usuario navega a una página web, es decir. después de que la página esté disponible para el usuario. El evento pageshow es similar al evento load, excepto que se activa cada vez que se carga la página, incluso si se carga desde el caché. Cuando se carga una página por primera vez, el evento pageshow se activa inmediatamente después del evento de carga.
- ocultar página: el evento ocurre cuando el usuario abandona la página (el evento ocultar página ocurre antes del evento de descarga). Además de esto este evento, a diferencia del evento de descarga, no impide el almacenamiento en caché de la página.
- cambiar tamaño: el evento ocurre cuando se cambia el tamaño de la ventana del navegador.
- scroll: el evento ocurre cuando desplazas el contenido de un elemento que tiene una barra de desplazamiento.
Eventos de formulario y control
- foco: el evento ocurre cuando el elemento recibe el foco. Este evento no aparece.
- Desenfoque: evento que ocurre cuando un objeto pierde el foco. Este evento no aparece.
- focusin: el evento ocurre cuando el elemento recibe el foco. El evento focusin es similar al evento focus, pero se diferencia de él en que burbujea. Por lo tanto, se puede utilizar cuando se necesita saber quién está perdiendo el foco: ¿el elemento o su hijo?
- focusout: el evento ocurre cuando un elemento está a punto de perder el foco. El evento de enfoque es similar al evento de desenfoque, pero se diferencia de él en que burbujea. Por lo tanto, se puede utilizar cuando se necesita saber quién está perdiendo el foco: ¿el elemento o su hijo?
- cambio: el evento ocurre cuando el valor del elemento cambia, pero después de que el elemento ha perdido el foco. Además del evento de cambio, JavaScript también tiene un evento de entrada similar, que se diferencia del evento de cambio en que ocurre inmediatamente después de que cambia el valor del elemento. El evento de cambio, a diferencia del evento de entrada, también funciona con keygen y elementos de selección. Para botones de radio y casillas de verificación, el evento de cambio ocurre cuando cambia el estado de estos elementos.
- entrada: el evento ocurre después de que el valor del elemento de entrada cambia o elemento de área de texto.
- no válido: el evento ocurre cuando un elemento de entrada cuyos datos deben enviarse junto con otros datos del formulario al servidor contiene datos no válidos.
- reset: el evento ocurre antes de que se borre el formulario, lo cual se realiza mediante un elemento de entrada con type="reset" .
- buscar: el evento ocurre después de que el usuario presiona la tecla Enter o hace clic en el botón "x" (cancelar) en un elemento de entrada con type="search" .
- seleccionar: el evento ocurre después de haber seleccionado algún texto en el elemento. El evento select se usa principalmente para un elemento de entrada con type="text" o textarea.
- enviar: el evento ocurre antes de que el formulario se envíe al servidor.
Arrastrar eventos
Eventos asociados con el objeto arrastrado (destino arrastrable, objeto de origen):
- dragstart: el evento ocurre cuando el usuario comienza a arrastrar un elemento;
- arrastrar: el evento ocurre cuando el usuario arrastra un elemento;
- dragend: el evento ocurre cuando el usuario ha terminado de arrastrar el elemento, es decir. cuando solté el cursor del mouse.
Eventos asociados con el destino de colocación que recibe el destino arrastrable:
- dragenter: el evento ocurre cuando un objetivo que se puede arrastrar ha ingresado al área de un objetivo de colocación que puede aceptar un objetivo que se puede arrastrar.
- ragleave: el evento ocurre cuando un objeto arrastrado (objetivo arrastrable) abandona los límites del elemento (objetivo de colocación) que puede aceptarlo.
- dragover: el evento ocurre cuando un objetivo que se puede arrastrar se mueve al área de un elemento (objetivo de colocación) que puede aceptarlo.
- soltar: el evento ocurre cuando el usuario suelta un objeto arrastrable en el área de un elemento (objetivo de colocación) que puede aceptarlo.
Eventos de animación
Tres eventos que pueden ocurrir mientras se ejecuta una animación CSS:
- Animationstart: ocurre cuando la animación CSS ha comenzado.
- iteración de animación: ocurre cuando se repite una animación CSS.
- Animationend: ocurre cuando la animación CSS ha finalizado.
Eventos del portapapeles
- copiar: el evento ocurre cuando el usuario copia el contenido de un elemento. El evento de copia también ocurre cuando el usuario copia un elemento (por ejemplo, imágenes creadas con el elemento img). El evento de copia se usa principalmente para elementos de entrada con tipo="text" .
- cortar: el evento ocurre cuando el usuario corta el contenido de un elemento.
- pegar: el evento ocurre cuando el usuario pega algún contenido en un elemento.
Imprimir eventos
- afterprint: el evento ocurre cuando la página comienza a imprimirse (es decir, después de hacer clic en el botón Imprimir en el cuadro de diálogo) o si el cuadro de diálogo Imprimir se ha cerrado.
- beforeprint: el evento ocurre antes de que se imprima la página, es decir. antes de abrir el cuadro de diálogo Imprimir.
Eventos de transición
- transiciónend: el evento se activa cuando se completa la transición CSS. Nota: Si se elimina una transición antes de completarse (por ejemplo, si propiedad CSS se ha eliminado la propiedad de transición), entonces el evento de finalización de transición no se activará.
Eventos enviados por el servidor.
- error: el evento ocurre cuando ocurre un error con el origen del evento. El error suele ocurrir cuando se interrumpe la comunicación. Si esto sucede, el objeto EventSource intentará conectarse automáticamente al servidor.
- abierto: el evento ocurre cuando la conexión al origen del evento está abierta.
- mensaje: el evento ocurre cuando se recibe un mensaje a través del origen del evento.
Objeto eventos de eventos El mensaje admite las siguientes propiedades:- datos: contiene el mensaje.
- origen: URL del documento que desencadenó el evento.
- lastEventId: identificador (id) del último mensaje recibido.
Eventos de medios
Durante el proceso de carga de audio/vídeo, los eventos ocurren en el siguiente orden: inicio de carga -> cambio de duración -> metadatos cargados -> datos cargados -> progreso -> canplay -> canplaythrough.
- cancelar: el evento ocurre cuando se interrumpe la carga de audio/vídeo. Este evento ocurre cuando se interrumpió (canceló) la descarga de datos multimedia y no porque ocurrió un error.
- error: el evento ocurre cuando ocurre un error al cargar audio/video.
- detenido: el evento ocurre cuando el navegador intenta recibir datos multimedia, pero los datos no están disponibles.
- - el evento ocurre cuando el navegador comienza a buscar el audio/video especificado, es decir cuando comienza el proceso de descarga.
- cambio de duración: el evento ocurre cuando cambia la duración del audio/video. Si se carga audio/vídeo, la duración variará desde "NaN" hasta la duración real del audio/vídeo.
- loadmetadata: evento que se activa cuando se han cargado los metadatos para el audio/vídeo especificado. Los metadatos de audio/vídeo constan de: duración, tamaño (solo vídeo) y pista de texto.
- Loadeddata: el evento ocurre después de que se haya cargado el primer fotograma del medio.
- progreso: el evento ocurre cuando el navegador descarga el audio/video especificado.
- canplay: el evento ocurre cuando el navegador puede comenzar a reproducir el audio/video especificado (es decir, cuando la transmisión de audio/video está lo suficientemente almacenada en el buffer para que el navegador comience a reproducirla).
- canplaythrough: el evento ocurre en un momento en el que el navegador puede reproducir el medio especificado sin detenerse para almacenar en el búfer.
- finalizado: el evento ocurre cuando la reproducción de audio/vídeo se completa (llega al final). Este evento se puede utilizar para mostrar mensajes como "Gracias por su atención", "Gracias por mirar", etc.
- pausa: el evento ocurre cuando el usuario o el código pausan la reproducción de audio/vídeo (mediante programación).
- reproducir: el evento ocurre cuando comienza la reproducción de audio/vídeo. También ocurre cuando el audio/vídeo se ha reanudado y comienza a reproducirse.
- Reproduciendo: el evento ocurre cuando se reproduce audio/vídeo después de haber sido pausado o detenido para almacenarlo en el búfer.
- ratechange: el evento ocurre cuando cambia la velocidad de reproducción de audio/video.
- búsqueda: el evento ocurre cuando el usuario comienza a mover el control deslizante (transición) a una nueva posición temporal del audio/video que se está reproduciendo.
- buscado: el evento ocurre cuando el usuario ha terminado de mover el control deslizante (transición) a una nueva posición temporal del audio/video que se está reproduciendo. El evento buscado es lo opuesto al evento buscado. Para obtener la posición de reproducción actual, use la propiedad currentTime del objeto Audio/Video.
- timeupdate: el evento ocurre cuando cambia la posición temporal del audio/video que se está reproduciendo.
Este evento ocurre:- al reproducir una secuencia de audio/vídeo.
- al mover el control deslizante a una nueva posición temporal del audio/vídeo que se está reproduciendo.
- cambio de volumen: el evento ocurre cada vez que cambia el volumen de la transmisión de video/audio en reproducción.
Este evento ocurre cuando:- aumentar o disminuir el volumen;
- silenciar o reactivar el sonido.
- esperando: el evento ocurre cuando el video se detiene para almacenarlo en el búfer.
Varios eventos
- alternar: el evento ocurre cuando el usuario abre o cierra el elemento de detalles. El elemento de detalles está diseñado para crear información adicional que el usuario puede ver u ocultar según sea necesario.
- rueda: el evento ocurre cuando la rueda del mouse se desplaza hacia adelante o hacia atrás sobre un elemento.
Misiones
- ¿Es complejo el evento "Presionar tecla en el teclado (onkeypress)"? Y si lo es, ¿a consecuencia de qué simples acontecimientos surge?
- Por ejemplo, tiene 2 p elementos y el usuario mueve el mouse desde un área que pertenece a un elemento p a un área que pertenece a otro elemento p. ¿Qué acontecimientos ocurren en este caso y qué elementos los generan?
La etiqueta más común utilizada en los formularios es . No tiene etiqueta de cierre. Toda la información que el navegador necesita para procesar está contenida directamente en la etiqueta y se especifica mediante varios atributos. Semántica varía significativamente dependiendo del valor de su atributo tipo.
Atributos de etiqueta
tipo El atributo principal que especifica el tipo de elemento. Si no se especifica el atributo, se utiliza el valor predeterminado texto.Valores posibles:
No todos los navegadores admiten los tipos agregados en HTML5.
Si el navegador no admite uno de los nuevos tipos, asumirá que es un archivo .
Cómo organizar el soporte para navegadores antiguos se describe usando el ejemplo de la fecha. Autocompletar="off" Desactiva la función de autocompletar para de este campo . Muy útil para campos de entrada de códigos de un solo uso, captchas, etc..setAttribute("autocompletar","apagado"); ...
...
enfoque automático Recibo automático centrarse cuando se carga la página. El valor se puede establecer de tres maneras:
... Un ejemplo de emulación de la propiedad de enfoque automático para navegadores más antiguos. deshabilitado Hace que el elemento sea inaccesible. Artículos no disponibles no se transmiten al servidor. Artículos no disponibles nombre Nombre del campo. Cada campo de entrada que cree debe tener su propio nombre único; de lo contrario, el script no determinará a qué campos se aplican los valores resultantes. Por supuesto, el nombre del campo de entrada debe coincidir con el nombre que se describe para él en el programa de procesamiento. Artículos no disponibles valor El valor predeterminado del campo o la etiqueta del botón.
tamaño El tamaño del campo de tipo.
maxlength Límite en el número de caracteres que se pueden ingresar en un campo de tipo. readonly="readonly" o "" Impide que el elemento sea modificado. obligatorio Comprueba automáticamente si el campo está completo.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Lista Una lista de opciones que se pueden seleccionar al escribir en un campo de texto.
Esta lista está inicialmente oculta y pasa a estar disponible cuando el campo recibe el foco o ingresa texto.
Tipos de elementos de ENTRADA
botón botón
Botón BOTÓN está destinado a aquellos casos en los que necesita ejecutar algún script. Es decir, se adjunta un evento al botón. Al hacer clic y se llama a la función requerida. Atributo valor establece la etiqueta en el botón. Atributo al hacer clic
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
nombre
sirve para nombrar el botón en JavaScript (no se transmite al servidor).
Ejemplo valor Botón botón ENVIAR Este botón es para enviar el formulario. En la mayoría de los navegadores, su apariencia es casi indistinguible de un botón. En sí mismo no se transmite, sino que sólo sirve para el control. Atributo para botón
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Ejemplo y se llama a la función requerida. De hecho, para transferir los datos ingresados en el formulario, en general no es necesario hacer clic en el botón
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Ejemplo Esto provocará la transferencia de datos. Aceptar pedido
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Rechazar
Aceptar como observador
formularionovalidar se puede utilizar para evitar que se validen los valores del formulario. Examen
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Botón REINICIAR
Este es el botón de borrar formulario. Al hacer clic, todos los elementos modificados vuelven a su valor predeterminado. Se utiliza muy raramente. Sin embargo, en algunos casos puede resultar bastante útil.
Consejo: tenga cuidado al elegir la etiqueta de un botón REINICIAR. Algo como "Borrar", "Comenzar de nuevo", "Eliminar entrada", etc. sería bastante claro (y, lo más importante, intuitivo incluso para los tontos de los tontos). En general, es necesario que el usuario no tenga ni la más mínima duda sobre la finalidad de esta clave. Reiniciar
Campo de entrada de TEXTO Atributo, siempre es obligatorio, ya que en función de este parámetro, el navegador pasa el par nombre=valor al script.
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
El texto "Ivanov" se coloca en el campo creado como valor inicial.
Si el usuario no realiza cambios o hace clic en el botón, el valor Ivanov se enviará al script como apellido del usuario.
Campo de entrada de números NÚMERO El campo está destinado a ingresar números. parte fraccionaria
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
Si el usuario ingresa letras, el formulario no se enviará al servidor. Enviar Puedes establecer el mínimo
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
valor máximo campos y paso de cambio de número..
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
Para resaltar un campo obligatorio completado correctamente, puede utilizar la siguiente estructura de estilo:
El valor del paso puede ser positivo o negativo, pero debe ser mayor que 0. Si el número ingresado en el campo no cumple con las restricciones especificadas, no se realizará el envío al servidor. Artículos no disponibles Para especificar cualquier paso, utilice
Campo
se muestra de manera diferente: algunos navegadores siempre muestran flechas, otros solo cuando pasan el cursor o reciben el foco. Contraseña Campo oculto OCULTO
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
, luego en el campo oculto de cada formulario podrás especificar un identificador que te permitirá determinar con qué formulario estás tratando.
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
...Otros elementos del formulario.... ...Otros elementos de forma... El navegador no muestra el campo oculto, aunque se puede descubrir si coloca el navegador en modo de vista de archivo HTML y analiza el texto de la página web. Los campos ocultos son útiles cuando desea proporcionar información necesaria para un script, pero no desea que el usuario pueda cambiarla. Sin embargo, tenga en cuenta que un usuario experto podría guardar su formulario en un archivo, editarlo y luego enviar el formulario modificado al servidor. Por lo tanto, no debes confiar en campos ocultos para crear ningún tipo de seguridad.
El script recibirá una variable llamada
Versión de formulario , al que se le asignará el valor 1,2. Esta información se puede utilizar para determinar cómo procesar el resto de la información recibida del formulario. Si el usuario cambia este valor, el programa script puede comportarse de forma inesperada. Campo de entrada de dirección de correo electrónico
especifica un controlador de JavaScript que se llama cuando se hace clic en el botón.
, con una coma (,) utilizada para separar direcciones
Correo electrónico: spam@sitio, noreply@sitio Los desarrolladores web tuvieron que lidiar solo con una pequeña cantidad de eventos: "cargar", "hacer clic", "pasar el mouse" y otros. Estos tipos de eventos bastante antiguos son compatibles con todos los navegadores. A medida que la plataforma web evolucionó, se incluyeron interfaces de aplicaciones más potentes y el número de eventos aumentó significativamente. No existe ningún estándar que defina el conjunto completo de eventos y la cantidad de eventos admitidos continúa creciendo rápidamente. Estos nuevos eventos se definen en las dos fuentes siguientes:
La especificación "DOM Level 3 Events", que, después de muchos años de estancamiento, comenzó a desarrollarse activamente bajo los auspicios del consorcio W3C.
Muchas interfaces de aplicaciones nuevas en la especificación HTML5 (y especificaciones adicionales relacionadas) definen nuevos eventos utilizados, por ejemplo, para administrar el historial de navegación, arrastrar y soltar, enviar mensajes entre documentos y reproducir audio y video.
Tenga en cuenta que muchos de estos nuevos tipos de eventos aún no cuentan con un soporte generalizado y están definidos por estándares que aún se encuentran en la fase de diseño. Los eventos que utilizará con mayor frecuencia en sus aplicaciones web serán normalmente los más antiguos que son compatibles con todos los navegadores: eventos de mouse, eventos de teclado, eventos de formularios HTML y eventos de ventana. Consideraremos estos eventos.
Eventos de carga de documentos
La mayoría de las aplicaciones web necesitan absolutamente que el navegador web les notifique cuando un documento ha terminado de descargarse y está listo para realizar operaciones en él. Este evento sirve para este propósito. carga en el objeto Ventana. El evento de carga se activa solo después de que el documento y todas sus imágenes se hayan cargado por completo. Sin embargo, los scripts normalmente se pueden ejecutar inmediatamente después de analizar el documento, antes de cargar las imágenes. Puede reducir significativamente el tiempo de inicio de una aplicación web si comienza a ejecutar scripts en eventos distintos de la carga.
Evento Contenido DOM cargado se activa una vez que el documento ha sido cargado, analizado por el analizador y todos los scripts pendientes se han ejecutado. En este punto, las imágenes y scripts con el atributo async pueden continuar cargándose, pero el documento en sí estará listo para las operaciones. Este evento se introdujo por primera vez en Firefox y posteriormente fue adoptado por todos los demás fabricantes de navegadores, incluido Microsoft, que agregó soporte para este evento en IE9. A pesar del prefijo DOM en el nombre, este evento no forma parte del estándar del modelo. eventos DOM Eventos de nivel 3, pero está estandarizado por la especificación HTML5.
A medida que se carga el documento, el valor de la propiedad document.readyState cambia. Cada cambio en el valor de esta propiedad en IE va acompañado de un evento readystatechange en el objeto Documento, por lo que en IE este evento se puede utilizar para determinar cuándo ocurre el estado completo. La especificación HTML5 estandariza el evento cambio de estado listo, pero le indica que se active inmediatamente antes del evento de carga, por lo que no está del todo claro cuál es la ventaja del evento readystatechange sobre la carga.
El siguiente ejemplo define la función whenReady(). La función pasada a whenReady() se llama (como método del objeto Documento) tan pronto como el documento esté listo para las operaciones. whenReady() espera los eventos DOMContentLoaded y readystatechange y usa el evento de carga solo como respaldo en caso de que se use en navegadores más antiguos que no admiten los dos primeros eventos. La función whenReady() se utilizará en algunos de los siguientes escenarios:
/* Pase cuandoReady() su función y la llamará (como método de objeto de documento) tan pronto como se complete analizando documento y estará listo para realizar operaciones. Las funciones registradas se llaman en el primer evento DOMContentLoaded, readystatechange o load.
Eventos del mouse
Una vez que el documento esté listo y se hayan llamado todas las funciones, whenReady() llamará inmediatamente a todas las funciones que se le pasaron. */ var whenReady = (function() ( // Esta función es devuelta por la función whenReady() var funcs = ; // Funciones que deben llamarse en el evento var ready = false; // Recibirá el valor verdadero cuando el se llama a la función del controlador // Controlador de eventos, que se llama tan pronto como el documento // está listo para realizar operaciones function handler(e) ( // Si el controlador ya ha sido llamado, simplemente devuelve el control si (listo) regresa; / / Si se trata de un evento readystatechange y el estado ha recibido un valor, // excelente de "completo" significa que el documento aún no está listo if (e.type==="readystatechange" && document.readyState !== "complete" ) return; // Llama a todas las funciones registradas // Tenga en cuenta que cada una está aquí. El valor de // la propiedad funcs.length se verifica una vez, en caso de que una de las funciones llamadas // registre funciones adicionales for(var i = 0 ; i.
| Eventos de mouse de JavaScript | Tipo |
|---|---|
| Descripción | hacer clic |
| Un evento de alto nivel que se genera cuando el usuario presiona y suelta un botón del mouse o activa un elemento de otra manera. | menú contextual |
| Un evento cancelable generado antes de que se muestre el menú contextual. Los navegadores actuales muestran un menú contextual al hacer clic con el botón derecho, por lo que este evento también se puede utilizar como evento de clic. | doble clic |
| Se dispara cuando el usuario hace doble clic. | mousedown |
| Se dispara cuando el usuario presiona un botón del mouse. | mouseup |
| Se dispara cuando el usuario suelta el botón del mouse. | movimiento del mouse |
| Se dispara cuando el usuario mueve el puntero del mouse. | pasar el mouse por encima |
| Se activa cuando el puntero del mouse se coloca sobre un elemento. La propiedad relatedTarget (o fromElement en IE) especifica el elemento desde el que se movió el puntero del mouse. | Se dispara cuando el puntero del mouse abandona el elemento. La propiedad relatedTarget (o toElement en IE) especifica el elemento al que se movió el puntero del mouse. |
| mouseenter | Similar al mouseover, pero no aparece. Introducido por primera vez en IE y estandarizado en HTML5, pero aún no es compatible con todos los navegadores. |
| dejar el ratón | Similar al mouseout, pero no aparece. Introducido por primera vez en IE y estandarizado en HTML5, pero aún no es compatible con todos los navegadores. |
El objeto pasado a los controladores de eventos del mouse tiene las propiedades clienteX Y clienteY, definiendo las coordenadas del puntero con respecto a la ventana. Para convertirlos en coordenadas de documento, debe agregarles posiciones de la barra de desplazamiento de la ventana.
Propiedades tecla alt, tecla Ctrl, metaclave Y tecla mayúscula determinar los estados de varias teclas modificadoras que podrían mantenerse presionadas en el momento del evento: con su ayuda, puede distinguir un simple clic de un clic con la tecla Shift presionada, por ejemplo.
Propiedad botón determina qué botón del mouse se mantuvo presionado en el momento del evento. Sin embargo, diferentes navegadores escriben valores diferentes en esta propiedad, por lo que es difícil utilizarla de forma portátil.
Algunos navegadores solo activan el evento de clic cuando se hace clic en el botón izquierdo. Por lo tanto, si necesita controlar los clics de otros botones, debe utilizar los eventos mousedown y mouseup. El evento del menú contextual normalmente indica que se ha realizado un clic derecho, pero como se señaló anteriormente, no siempre es posible que los controladores de este evento impidan que aparezca el menú contextual.
El siguiente ejemplo demuestra la función drag(), que, cuando se llama desde un controlador de eventos con el mouse presionado, permite al usuario arrastrar elementos del documento absolutamente posicionados con el mouse. La función drag() funciona con modelos de eventos DOM e IE.
La función drag() toma dos argumentos. El primero es el elemento que se está arrastrando. Este podría ser el elemento en el que ocurrió el evento del mousedown y el elemento que lo contenía (por ejemplo, podría permitir que el usuario arrastre el mouse sobre un elemento que parece la barra de título de una ventana y arrastre el elemento contenedor que parece una ventana). . Sin embargo, en cualquier caso, debe ser un elemento documental, posicionado absolutamente con usando CSS-atributo de posición. El segundo argumento es el objeto de evento recibido con el evento del mousedown:
/* drag() - arrastrando elementos HTML absolutamente posicionados. Esta función debe llamarse desde el controlador de eventos onmousedown. Los eventos posteriores de movimiento del mouse harán que se mueva el elemento especificado. El evento mouseup completará el movimiento. Esta implementación funciona tanto en el modelo de eventos estándar como en el IE. Utiliza la función getScrollOffsets(). eventos // Registra los controladores de interceptación en el documento document.addEventListener("mousemove", moveHandler, true); Argumentos: elementToDrag: El elemento que recibió el evento del mousedown o el elemento contenedor. Este elemento debe tener posicionamiento absoluto. Los valores de sus propiedades style.left y style.top cambiarán a medida que el usuario mueva el puntero del mouse.
evento: el objeto de evento recibido por el controlador de eventos del mousedown. */ function drag(elementToDrag, event) ( // Convierte las coordenadas iniciales del puntero del mouse en coordenadas de documento var scroll = getScrollOffsets(); // Función auxiliar declarada a continuación var startX = event.clientX + scroll.x; var startY = event. clientY + scroll.y; // Las coordenadas iniciales (relativas al inicio del documento) del elemento que // se moverá. Dado que elementToDrag tiene un posicionamiento absoluto, // se supone que su propiedad offsetParent se refiere al cuerpo. del documento. var origY = elementToDrag.offsetTop; // Encuentra la distancia entre el punto del evento del mousedown y la esquina superior izquierda del elemento. // Registra los eventos mousemove y mouseup, // que seguirán al evento del mousedown. (document.addEventListener) ( //
Siguiente método
funciona en todos los navegadores excepto IE versión 8 y anteriores si (w.pageXOffset! = null) return (x: w.pageXOffset, y:w.pageYOffset);
modo estándar
Los navegadores admiten tres eventos de entrada de teclado heredados. Los eventos keydown y keyup son eventos de bajo nivel y se analizan en la siguiente sección. Sin embargo, el evento pulsación de tecla es una señal de alto nivel de que se ha introducido un carácter imprimible.
El borrador de la especificación de eventos DOM Nivel 3 define un evento más general entrada de texto, generado en respuesta a la entrada de texto, independientemente de cómo se haya introducido.
Con el evento textinput propuesto y el evento textInput implementado actualmente, se pasa un objeto de evento simple que tiene una propiedad de datos que almacena el texto ingresado. (Otra propiedad propuesta por la especificación, inputMethod, debería especificar la fuente de la entrada, pero aún no está implementada). Para la entrada por teclado, la propiedad de datos normalmente contendrá un solo carácter, pero para la entrada de otras fuentes puede contener muchos caracteres. .
El objeto de evento pasado con el evento de pulsación de tecla tiene más de organización compleja. El evento de pulsación de tecla representa la entrada de un solo carácter. Este carácter está contenido en el objeto de evento como un valor de punto de código Unicode numérico y, para convertirlo en una cadena, debe utilizar el método String.fromCharCode(). En la mayoría de los navegadores, el punto de código del carácter ingresado se almacena en la propiedad código clave objeto del evento. Sin embargo, por razones históricas, Firefox usa la propiedad en su lugar. código de caracteres.
En la mayoría de los navegadores, el evento de pulsación de tecla se activa sólo cuando se ingresa un carácter imprimible. Sin embargo, en Firefox, el evento de pulsación de tecla también se genera para caracteres que no se imprimen. Para distinguir entre estos dos casos (e ignorar los caracteres no imprimibles), puede verificar si la propiedad charCode del objeto de evento existe y si contiene el valor 0.
Los eventos de entrada de texto, entrada de texto y pulsación de tecla se pueden cancelar para evitar que se ingrese un carácter. Es decir, estos eventos se pueden utilizar para filtrar la entrada. Por ejemplo, puede impedir que se introduzcan caracteres alfabéticos en un campo destinado a la entrada de datos numéricos.
El siguiente ejemplo muestra un módulo sobre javascript, que implementa este tipo de filtrado. busca elementos con un atributo adicional (no estándar) de caracteres permitidos de datos. Registra los controladores de eventos textinput, textInput y keypress para todos los elementos encontrados y limita la entrada a los caracteres de expresión regular especificados en el atributo data-allowed-chars:
/* Filtrar entrada para elementos Este módulo encuentra todos los elementos. en el documento que tiene el atributo "data-allowed-chars". Registra controladores de eventos de pulsación de tecla, entrada de texto y entrada de texto para estos elementos para restringir el conjunto de caracteres permitidos para la entrada y permitir que solo se ingresen los caracteres especificados en el atributo. si elemento también tiene un atributo "data-messageid", el valor de este atributo se interpreta como la identificación de otro elemento del documento. Si el usuario ingresa un carácter no válido, el elemento con la identificación especificada se hace visible. Si el usuario ingresa un carácter válido, el elemento del mensaje se oculta. Este elemento de mensaje tiene como objetivo mostrar una explicación de por qué se rechazó la entrada del usuario. Su diseño debe implementarse utilizando CSS para que inicialmente sea invisible. */ whenReady(function () ( // Llama a esta función cuando se carga el documento // Encuentra todos los elementos var inputelts = document.getElementsByTagName("entrada");< inputelts.length; i++) { var elt = inputelts[i]; // Пропустить элементы, не являющиеся текстовыми полями ввода // и не имеющие атрибута data-allowed-chars if (elt.type != "text" || !elt.getAttribute("data-allowed-chars")) continue; // Зарегистрировать наш обработчик события в этом элементе input // keypress старое событие и реализовано во всех браузерах. // textInput поддерживается в Safari и Chrome с 2010 года. // textinput версия проекта стандарта "DOM Level 3 Events". if (elt.addEventListener) { elt.addEventListener("keypress", filter, false); elt.addEventListener("textInput", filter, false); elt.addEventListener("textinput", filter, false); } // textinput не поддерживается версиями IE, в которых не реализован // метод addEventListener() else { elt.attachEvent("onkeypress", filter); } } // Обработчик событий keypress и textInput, фильтрующий ввод пользователя function filter(event) { // Получить объект события и // Recorrerlos en for(var i = 0 ; i elemento objetivo< 32 || // Управляющий objetivo var e = evento || ventana.evento; // Modelo estándar o IE var target = e.target || e.srcElemento; // Modelo estándar o IE var text = null; // Ingresar texto // Obtener el carácter o texto ingresado if (e.type === "textinput" || e.type === "textInput") text = e.data; else ( // Esto fue un evento de pulsación de tecla // El carácter escrito en Firefox se almacena en la propiedad charCode var code = e.charCode || e.keyCode; // Si se presionó alguna tecla de función, no la filtre if (code< text.length; i++) { var c = text.charAt(i); allowed = new RegExp(allowed, "i"); // Создаем регулярное выражение if (c.search(allowed) == -1) { // Недопустимый символ? // Отобразить элемент с сообщением, если указан if (messageElement) messageElement.style.visibility="visible"; // Отменить действия по умолчанию, чтобы предотвратить вставку текста if (e.preventDefault) e.preventDefault(); if (e.returnValue) e.returnValue = false; return false; } } // Если все символы оказались допустимыми, скрыть элемент // с сообщением, если он был указан if (messageElement) messageElement.style.visibility = "hidden"; } });
carácter ASCII e.charCode == 0 || // Tecla de función (en Firefox) e.ctrlKey || e.altKey) // La tecla modificadora que se mantendrá return; // No filtrar este evento // Convertir el código de carácter en una cadena var text = String.fromCharCode(code);) // Encuentra la información que necesitamos en este elemento input var permitido = target.getAttribute("data-allowed-chars"); // Caracteres válidos var messageid = target.getAttribute("data-messageid"); // ID del mensaje if (messageid) // Si se especifica id, obtiene el elemento var messageElement = document.getElementById(messageid);
Solo letras
Los eventos de pulsación de tecla y entrada de texto se activan justo antes de que se inserte texto nuevo en el elemento del documento que tiene el foco de entrada, por lo que los controladores de estos eventos pueden evitar que se inserte texto cancelando el evento.
Los navegadores también implementan el evento. REINICIAR, que se activa después de insertar texto en el elemento. Este evento no se puede cancelar y su objeto de evento correspondiente no contiene información sobre el texto insertado; simplemente notifica que el contenido del texto del elemento ha cambiado. Si, por ejemplo, desea asegurarse de que solo se ingresen caracteres en mayúsculas, puede definir un controlador de eventos de entrada como se muestra a continuación:
El evento de entrada está estandarizado en la especificación HTML5 y es compatible con todos los navegadores modernos excepto IE. Se puede lograr un efecto similar en IE detectando un cambio en la propiedad de valor de un elemento de entrada de texto mediante un evento personalizado. cambio de propiedad.
Eventos de teclado
Eventos pulsación de tecla Y tecla Se activa cuando el usuario presiona o suelta una tecla en el teclado. Se generan para teclas modificadoras, teclas de función y teclas alfanuméricas. Si el usuario mantiene presionada una tecla el tiempo suficiente para activar el modo de repetición automática, se generarán muchos eventos de pulsación de tecla antes de que se produzca el evento de pulsación de tecla.
El objeto de evento correspondiente a estos eventos tiene la propiedad código clave con un valor numérico que identifica la tecla presionada. Para las claves que generan caracteres imprimibles, en general la propiedad keyCode contiene el punto de código Unicode correspondiente al carácter base representado en la clave. Las teclas de letras siempre generan valores keyCode correspondientes a caracteres en mayúscula, independientemente del estado de la tecla Shift, ya que esos son los caracteres representados en las teclas.
Del mismo modo, las teclas numéricas siempre generan valores keyCode correspondientes a los caracteres numéricos representados en las teclas, incluso si mantiene presionada Tecla Mayús para ingresar puntuación. Para las claves que no corresponden a caracteres imprimibles, la propiedad keyCode tendrá algún otro valor. Estos valores de propiedad keyCode nunca se han estandarizado. Sin embargo, no difieren tanto entre navegadores como para que no se pueda lograr la portabilidad.
Al igual que los objetos de evento del mouse, los objetos de evento del teclado tienen propiedades tecla alt, tecla Ctrl, metaclave Y tecla mayúscula, que se evalúa como verdadero si se mantuvo presionada la tecla modificadora correspondiente cuando ocurrió el evento.
Los eventos keydown y keyup y la propiedad keyCode se han utilizado durante más de una década, pero nunca se han estandarizado. El borrador de Eventos DOM Nivel 3 estandariza los tipos de eventos keydown y keyup, pero no estandariza la propiedad keyCode. En cambio, define una nueva propiedad, clave, que debe contener el nombre de la clave como una cadena. Si una clave corresponde a un carácter imprimible, la propiedad de la clave debe contener ese carácter imprimible. Para las teclas de función, la propiedad clave debe contener valores como F2, Inicio o Izquierda.
Al momento de escribir este artículo, la propiedad clave definida por el estándar DOM Nivel 3 Eventos aún no se ha implementado en ningún navegador. Sin embargo, los navegadores basados en Webkit, Safari y Chrome definen una propiedad en los objetos de estos eventos: identificador de clave. Para las teclas de función, como la propiedad clave, la propiedad keyIdentifier no contiene un número sino una cadena con el nombre de la clave, como Shift o Enter. Para las claves correspondientes a caracteres imprimibles, esta propiedad contiene una representación de cadena menos utilizable del punto de código Unicode del carácter. Por ejemplo, la clave A corresponde al valor U+0041.
El siguiente ejemplo define una clase Keymap que asigna identificadores de combinación de teclas como PageUp, Alt_Z y ctrl+alt+shift+F5 a funciones JavaScript que se llaman en respuesta a la presión de esas combinaciones de teclas. Las definiciones de enlace de claves se pasan al constructor Keymap() en el formulario Objeto JavaScript, cuyos nombres de propiedades corresponden a identificadores de combinaciones de claves, y los valores de estas propiedades contienen referencias a funciones de controlador. Agregar y eliminar enlaces se realiza utilizando los métodos bind() y unbind().
Establece el objeto Keymap en el elemento HTML (normalmente en Objeto de documento) usando el método install(). Cuando se establece un objeto Keymap, se registra un controlador de eventos de pulsación de tecla con este elemento. Cada vez que se presiona una tecla, el controlador verifica si hay una función correspondiente a esa combinación. Si la función existe, se llama.
El controlador de eventos keydown utiliza la propiedad clave definida por el estándar de eventos DOM Nivel 3, si existe. De lo contrario, intenta utilizar la propiedad keyIdentifier de Webkit. Y como alternativa, el controlador utiliza la propiedad keyCode no estándar:
// Función constructora función Keymap(bindings) ( this.map = (); // Definir el identificador de mapeo->handler if (bindings) ( // Copiar el mapa de enlace inicial en él for(nombre en enlaces) this.bind( nombre, enlaces); ) ) // Vincula el identificador de clave especificado a función especificada controlador Keymap.prototype.bind = función (clave, func) (this.map = func;); // Elimina el enlace para el ID de clave especificado Keymap.prototype.unbind = function(key) (eliminar this.map;); // Instala este objeto Keymap en el elemento HTML especificado Keymap.prototype.install = function(element) ( var keymap = this; // Definir funciones del controlador de eventos function handler(event) ( return keymap.dispatch(event, element); ) // Establecerlo if (element.addEventListener) element.addEventListener("keydown", handler, false); else if (element.attachEvent) element.attachEvent("onkeydown", handler); // Este método delega el manejo de eventos del teclado, basándose en enlaces Keymap.prototype.dispatch = function(event, element) ( // Inicialmente no hay nombres de teclas modificadoras ni nombres de clave var modifiers = ""; var keyname = null; / / Construir cadenas modificadoras en forma canónica de caracteres // en minúsculas, ordenándolos alfabéticamente. El nombre y el valor deben constar únicamente de caracteres en minúscula "escape":"esc", "return":"enter", "delete":"del", "ctrl":"control", "space":"spacebar", "ins": "insertar" ); // La antigua propiedad keyCode del objeto de evento keydown no está estandarizada // Pero los siguientes valores se pueden usar con éxito en la mayoría de los navegadores y sistemas operativos. Keymap.keyCodeToKeyName = ( // Teclas con palabras o flechas 8:"Retroceso", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt", 19:"Pausa", 20:"Bloq Mayús", 27:"Esc", 32:"Barra espaciadora", 33:"Re Pág", 34: "Av Pág", 35: "Fin", 36: "Inicio", 37: "Izquierda", 38:"Arriba", 39:"Derecha", 40:"Abajo", 45:"Insertar", 46:"Supr", // Teclas numéricas en el teclado principal (no en el adicional) 48 :"0 ",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:" 8", 57:"9", // Teclas de letras. Tenga en cuenta que no hay distinción entre caracteres en mayúsculas y minúsculas 65: "A", 66: "B", 67: "C", 68: "D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 74:"J", 75:"K", 76:"L", 77: " M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 83:"S", 84:"T", 85:"U " , 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z", // Teclas numéricas activadas teclado adicional y teclas con signos de puntuación.
// (No compatible con Opera.) 96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6" ,103:"7",104:"8", 105:"9",106:"Multiplicar", 107:"Suma", 109:"Restar", 110:"Decimal", 111:"Dividir", / / Teclas de función 112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8" , 120:"F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128 :"F17", 129:"F18", 130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24", // Teclas con signos de puntuación que // no requieren que mantenga presionada la tecla Mayús.
Window.onload = function() ( var keymap = new Keymap; // Crea un nuevo objeto de mapa de teclas keymap.bind("ctrl+a", // Combinación Ctrl+A function(event, keyid) ( alert("Presionaste: " + keyid) )); // Otro enlace Ctrl + Enter keymap.bind("ctrl+enter", function(event, keyid) ( alert("Presionaste: " + keyid) )); cuerpo); // Establecer el objeto Keymap para todo el documento);
El tema anterior analizó los eventos que ocurren cuando se presionan las teclas. En este tema veremos otros eventos de formulario. Incluyendo el envío del formulario al servidor.
Elemento en foco
Cuando un elemento de formulario tiene foco, se activa el evento de enfoque y cuando el elemento se desenfoca, se activa el evento de desenfoque. Creemos un campo de entrada y enviemos texto a la consola cuando recibe el foco y cuando lo pierde:
código HTML:
El evento de desenfoque a veces se usa para verificar el valor ingresado por el usuario en un campo de entrada.
No tiene sentido utilizar estos eventos para cambiar el estilo de un elemento. Existe una pseudoclase llamada focus en CSS para este propósito.
Introduciendo un valor
evento de entrada Ocurre cuando el usuario escribe texto en un campo de entrada. Se activa cuando se agrega o elimina cada carácter, así como cuando se copia texto en el campo de entrada. En algunos navegadores, esto funciona de manera inusual: cada vez que se ingresa un carácter, se genera un evento de desenfoque, luego se ejecuta el controlador de eventos de entrada y luego se genera el evento de enfoque. Si no hay controladores de eventos de enfoque y desenfoque, entonces no hay problema. Pero si es así, se activarán cada vez que se agregue un símbolo.
Agreguemos otra etiqueta a la página. y mostrar su valor al ingresar texto:
código HTML:
JavaScript:
12 |
var newv=document.getElementById("nuevovalor"); newv.onchange = function () ( console.log("Valor cambiado a: "+newv.value); ); |
Enviar un formulario
El evento de envío se activa cuando el formulario se envía al servidor. Se utiliza para validar los datos que el usuario ha introducido en el formulario. El controlador verifica los valores de los elementos del formulario y, si algún valor se ingresa incorrectamente, el formulario se cancela. Esto generalmente muestra un mensaje que indica lo que debe corregirse.
Colocar las etiquetas creadas al formulario y agregue un botón de enviar:
código HTML:
Si el formulario se completa correctamente, es decir, todos los campos contienen al menos dos caracteres, el navegador intentará ejecutar el archivo especificado en atributo de acción y se producirá un error porque no existe dicho archivo. Pero esto no supone ningún riesgo, por lo que no hay por qué tener miedo de probar el guión. Si en uno de los campos se introducen menos de dos caracteres, aparecerá un mensaje y se cancelará el envío. Si hay muchos cheques, puede mostrar un mensaje diferente para cada cheque y cancelar el envío del formulario.
