Este artículo resume los eventos comunes de JS DOM para todos y tiene cierto valor de referencia. Los amigos interesados pueden consultarlo.
clic, clic, doble clic, doble clic en el menú contextual, clic con el botón derecho del mouse sobre el elemento, se recomienda usar mouseenter en lugar de mouseout, el mouse sale del elemento, se recomienda usar mouseleave en lugar de mouseenter el mouse está flotando sobre el elemento mouseleave el mouse sale del elemento mousedown botón del mouse presionar mouseup botón del mouse levantar mousemove movimiento del mouse
presionar el botón del teclado presionado tecla arriba botón del teclado presionar la tecla levantada botón del teclado presionado, usado para ingresar teclas de caracteres
1. Qué elementos ¿Puedo escuchar eventos de teclado?
① documento
② Elementos que pueden recibir atención (controles de formulario, especialmente elementos de entrada)
2. ¿Cuál es la diferencia entre pulsar una tecla y pulsar una tecla?
① La pulsación de tecla se puede activar presionando todas las teclas y no puede distinguir entre teclas en mayúsculas y minúsculas.
② La pulsación de tecla solo se puede activar cuando se presiona la tecla que puede ingresar caracteres, y las teclas pueden distinguir entre mayúsculas y minúsculas.
3. ¿Cómo saber qué botón se presionó?
Utilice los atributos en el objeto de evento:
evnet.keyCode obtiene el valor ascii correspondiente al
evento clave, que es lo mismo que keyCode
event.key obtiene el valor del carácter de la clave.
carga del evento del documento se activará cuando se cargue todo en la página. Puede escuchar la ventana o el elemento del cuerpo. DOMContentLoaded se activará cuando se carguen todos los elementos de la página. solo se puede usar addEventListener para escuchar el evento antes de la descarga. La diferencia entre el evento de carga y el evento DOMContentLoaded que se activa cuando se cierra la página web
:
① El evento de carga se activa solo después de que se carga todo en la página, incluidos los elementos y externos. recursos.
② El evento DOMContentLoaded se puede activar cuando se cargan todos los elementos de la página, excluidos los recursos externos.
envío del evento de formulario se activa cuando se envía el formulario. Este evento escucha el elemento del formulario. El reinicio se activa cuando se restablece el formulario. Este evento escucha el elemento del formulario. El foco se activa cuando el control del formulario gana el foco. El desenfoque se activa cuando el control del formulario pierde el foco. cambio Para el cuadro de entrada, solo se activará cuando el contenido cambie y se pierda el foco adecuado para seleccionar
cargar archivo de imagen descarga completa error falla de carga de imagen
cambiar tamaño monitorea la ventana y los cambios de tamaño de la ventana gráfica se desplazan. monitorea la ventana o elementos con cuerpos de desplazamiento, y se activa cuando se desplaza el contenido de la página o elemento.
Establezca el primer parámetro formal para la función de devolución de llamada del evento para obtener el objeto de evento.
Diferentes tipos de eventos obtienen diferentes tipos de objetos de evento.
offsetX / offsetY Obtenga la posición de coordenadas del mouse en el elemento de destino clientX / clientY Obtenga la posición de coordenadas del mouse en la ventana gráfica pageX / pageY Obtenga la posición de coordenadas del mouse en la página screenX / screenY Obtener la posición de coordenadas del mouse en la pantalla El botón de posición de coordenadas en el botón obtiene qué botón del mouse se presionó, 0: botón izquierdo 1: botón central 2: botón derecho
keyCode obtiene el valor del código correspondiente al botón que es el mismo que keyCode key Obtiene el valor del carácter correspondiente a la clave
type Obtiene el nombre del evento timeStamp Obtiene el número de milisegundos desde que se activa el evento target Obtiene el elemento objetivo stopPropagation() Previene que el evento se propague preventDefault() Bloquea el comportamiento predeterminado del navegador
ejecutando event.stopPropagation() en la función de devolución de llamada del evento para evitar la propagación.
Hacer clic en el hipervínculo para enviar y restablecer el formulario de salto, hacer clic derecho para abrir el menú del sistema, etc...
llame event.preventDefault() en la función de devolución de llamada del evento para evitar el comportamiento predeterminado.
Nota: Si utiliza el segundo método para escuchar eventos,
return falseen la función de devolución de llamada también puede evitar el comportamiento predeterminado.
evento delegado de eventos escucha el elemento ancestro, determina el elemento de destino y realiza operaciones relevantes si el elemento de destino cumple las condiciones.
Ventajas de la delegación de eventos:
para escuchar el mismo evento en una gran cantidad de elementos, usar la delegación de eventos es más eficiente que recorrer y escuchar uno por uno.
El uso de la delegación de eventos permite que nuevos elementos respondan a los eventos.
Recomendaciones relacionadas: [videotutorial de JavaScript]
¡Lo anterior es el último resumen de eventos DOM comunes de JavaScript! Para obtener más detalles, preste atención a otros artículos relacionados en el sitio web chino de php.
