prefacio
En el desarrollo front-end, las operaciones relacionadas con eventos son operaciones muy comunes, especialmente los requisitos que involucran interacciones complejas en escenarios comerciales reales. Hay muchos eventos de uso común en JS, e involucran diferentes métodos y tipos de eventos de clic. Generalmente, los eventos se usan en combinación con funciones. Es por eso que los eventos y las funciones no están separados, es decir, la ejecución de las funciones está impulsada por hechos que ocurren. . Con respecto al uso de eventos comunes, este artículo los compartirá en detalle y los registrará para referencia posterior.
¿Qué son los eventos en JS?
En JS, un evento en realidad se refiere a una operación realizada por un usuario debido a un determinado comportamiento en una determinada transacción, es decir, algún comportamiento de operación en los elementos de la página web. Un evento es un momento de operación interactivo específico que ocurre en un documento o ventana del navegador. Es una acción realizada por el usuario o el navegador mismo, y es un puente para la interacción entre JS y DOM. Por ejemplo, hacer clic, cargar y pasar el mouse sobre son todos eventos.nombre. Los eventos generalmente se usan junto con funciones para impulsar la ejecución de la función a través de los eventos que ocurren.
Nota : en JS, los nombres de los eventos distinguen entre mayúsculas y minúsculas. Si se trata de un método de escucha de eventos, debe cancelar delante del nombre del evento.
Los tres elementos del evento.
Los tres elementos de un evento se refieren a la fuente del evento, el evento en sí y el controlador del evento.
1. Origen del evento: se refiere a qué elemento desencadena el evento, como: etiqueta div, etiqueta de botón, etc.
2. El evento en sí: El evento se refiere a la acción realizada durante la interacción, como: hacer clic, hacer doble clic, deslizar, etc.
3. Controlador de eventos: también llamado controlador de eventos, es decir, el resultado después de la ejecución, por ejemplo: la función de evento de clic ejecutada al hacer clic en la etiqueta del botón.
Resumen de eventos en JS
En JS, hay seis tipos principales de eventos de uso común: eventos de teclado, eventos de mouse, eventos táctiles, eventos de formulario, eventos de transición y eventos de animación.
1. Eventos de teclado
Los eventos del teclado se dividen principalmente en disparadores en tres estados: soltar, presionar y tecla de función no reconocida. Específicamente de la siguiente manera:
| eventos de teclado |
Condiciones desencadenantes |
| encendido |
Activado cuando se suelta una tecla del teclado |
| onkeydown |
Activado cuando se presiona una tecla del teclado |
| onkeypress |
Se activa cuando se presiona una tecla del teclado y no reconoce las teclas de función, como ctrl |
Usando un ejemplo, dispare cuando se suelte el teclado y emita "¡Hola!", El código específico es el siguiente:
window.onkeyup = function() {
console.log('Hello!')
}
2. Eventos de ratón
Los eventos del mouse se dividen principalmente en disparadores en diez estados: botón izquierdo, botón derecho, doble clic, pasar, salir, obtener el enfoque, perder el enfoque, moverse, aparecer y presionar. Específicamente de la siguiente manera:
| evento del ratón |
Condiciones desencadenantes |
| al hacer clic |
Se activa cuando se hace clic con el botón izquierdo del mouse |
| Menú de contexto |
Se activa cuando se hace clic con el botón derecho del ratón |
| ondblclick |
Se activa cuando se hace doble clic con el mouse |
| el ratón por encima |
Activado cuando el mouse ha terminado |
| fuera del ratón |
Despedido cuando el ratón se va |
| enfocado |
Activado cuando se obtiene el foco del ratón |
| en la falta de definición |
Activado cuando se pierde el foco del mouse |
| onmovemove |
Activado cuando el ratón se mueve |
| en el mouse arriba |
Activado cuando el mouse está arriba |
| en el mouse hacia abajo |
Activado cuando se presiona el mouse |
Ejemplo de uso, desencadenar cuando el mouse hace clic en el botón izquierdo, agregar un evento de clic al botón btn, hacer clic para mostrar ¡Hola!, el código específico es el siguiente:
let button = document.querySelector('button')
button.onclick = function() {
console.log('Hello!')
}
3. Eventos táctiles
Los eventos táctiles se dividen principalmente en disparadores en tres estados: tocar, deslizar y alejarse. Específicamente de la siguiente manera:
| evento táctil |
ilustrar |
| Inicio táctil |
Se activa cuando un dedo toca un elemento DOM |
| tocar mover |
Activado cuando un dedo se desliza sobre un elemento DOM |
| punto de contacto |
Se dispara cuando el dedo se aleja de un elemento DOM |
Usando un ejemplo, se activa cuando se activa un evento táctil, y cuando el dedo toca el cuadro, el código específico es el siguiente:
let title = document.querySelector('div')
title.touchstart = function() {
console.log('touch')
}
4. Formar eventos
Los eventos de formulario se dividen principalmente en disparadores en siete estados: ganar foco, perder foco, entrada, cambio, selección, reinicio y envío. Específicamente de la siguiente manera:
| evento de formulario |
Condiciones desencadenantes |
| enfocado |
Despedido cuando el formulario se enfoca |
| en la falta de definición |
Activado cuando el formulario pierde el foco |
| en la entrada |
Se activa cada vez que se ingresa el formulario |
| en el cambio |
Activado cuando cambia el contenido del formulario |
| en seleccionar |
Activado cuando se selecciona el texto del formulario |
| reinicio |
Activado cuando se reinicia el formulario |
| onsubmit |
Activado cuando se envía el formulario |
Usando un ejemplo, se activa cada vez que se ingresa el formulario, y el contenido ingresado en el formulario se imprime cada vez.El código específico es el siguiente:
let input = document.querySelector('input')
input.oninput = function() {
console.log(this.value); //value就是输入的内容
}
5. Eventos de transición
Los eventos de transición se activan cuando se completa la transición. Específicamente de la siguiente manera:
| evento de transición |
Condiciones desencadenantes |
| en transición |
se dispara cuando se completa la transición |
6. Eventos de animación
Los eventos de animación se dividen principalmente en disparadores en tres estados: finalizar, repetir y reproducir. Específicamente de la siguiente manera:
| evento de animación |
Condiciones desencadenantes |
| onanimationend |
Se activa cuando la animación termina de reproducirse |
| sobreanimacióniteración |
Activado cuando la animación se repite |
| onanimationstart |
Activado cuando la animación comienza a reproducirse |
objeto de evento
Los objetos de evento en JS incluyen principalmente: objetos de evento, objetos de evento de mouse y objetos de evento de teclado.
1. Objeto de evento
El objeto de evento incluye principalmente cuatro partes: objeto, tipo, método y prevención de burbujeo. Específicamente de la siguiente manera:
| El método de propiedad del objeto de evento. |
ilustrar |
| e.objetivo |
Hace referencia al objeto que devuelve el evento desencadenante |
| e.tipo |
Hace referencia al tipo de evento devuelto, como hacer clic, pasar el mouse por encima, sin activar |
| e.preventDefault() |
Se refiere al método que evita el evento predeterminado, como prohibir el botón izquierdo en la página |
| e.detener la propagación() |
Se refiere al método que evita que el evento burbujee |
Usando un ejemplo, cuando se hace clic en el botón, se imprime el objeto que activa el evento y el código específico es el siguiente:
let button = document.querySelector('button')
button.onclick = function(e) {
console.log(e.target); //触发事件的对象
}
2. Objeto de evento de ratón
El objeto de evento del mouse incluye principalmente seis partes: coordenada x del navegador, coordenada y del navegador, coordenada x del documento, coordenada y del documento, coordenada x de la pantalla, coordenada y de la pantalla. Específicamente de la siguiente manera:
| objeto de evento de ratón |
ilustrar |
| e.clienteX |
Se refiere a devolver la coordenada X del mouse en relación con el área visible de la ventana del navegador |
| e.clienteX |
Se refiere a devolver la coordenada Y del mouse en relación con el área visible de la ventana del navegador |
| e.pageX |
Se refiere a devolver la coordenada X del mouse en relación con la página del documento. |
| e.pageY |
Hace referencia a devolver la coordenada Y del ratón relativa a la página del documento |
| e.pantallaX |
Se refiere a devolver la coordenada X del mouse en relación con la pantalla de la computadora |
| e.screenY |
Se refiere a devolver la coordenada Y del mouse en relación con la pantalla de la computadora |
3. Objeto de evento de teclado
El objeto de evento de teclado se refiere principalmente a devolver el valor de la tecla física presionada por el usuario. Específicamente de la siguiente manera:
| objeto de evento de teclado |
ilustrar |
| llave electrónica |
Devuelve el valor de la tecla física presionada por el usuario |
Usando un ejemplo, cuando se presiona la tecla S en la página, se emite el valor de la tecla física presionada. El código específico es el siguiente:
window.addEventListener('keyup', function(e) {
console.log(e.key);
})
por fin
A través de la introducción detallada de eventos comunes en JS de desarrollo front-end en este artículo, es un punto de conocimiento muy clave tanto en el trabajo de desarrollo front-end real como en la entrevista de trabajo front-end, por lo que como desarrollador front-end, usted debe dominar su contenido relacionado, especialmente para los desarrolladores que han estado involucrados en el desarrollo front-end por poco tiempo. Es un artículo que vale la pena leer, y la importancia no se repetirá. Bienvenido a prestar atención, comunicarse y progresar juntos.