Objetivo del evento de Javascript
Un evento es algo que ocurre cuando el usuario interactúa con la página web, como cuando hace clic en un enlace o botón, introduce texto en una caja de entrada o área de texto, hace una selección en una caja de selección, pulsa una tecla en el teclado, mueve el puntero del ratón, envía un formulario, etc. En algunos casos, el propio navegador puede desencadenar los eventos, como los eventos de carga y descarga de la página.
Hay varias formas de asignar un manejador de eventos. La forma más sencilla es añadirlos directamente a la etiqueta de inicio de los elementos HTML utilizando los atributos especiales event-handler. Por ejemplo, para asignar un manejador de clic para un elemento botón, podemos usar el atributo onclick, así:
En general, los eventos se pueden clasificar en cuatro grupos principales: eventos de ratón, eventos de teclado, eventos de formulario y eventos de documento/ventana. Hay muchos otros eventos, los aprenderemos en capítulos posteriores. La siguiente sección le dará una breve visión general de los eventos más útiles uno por uno junto con los ejemplos prácticos de la vida real.
El evento keypress ocurre cuando un usuario presiona una tecla en el teclado que tiene un valor de carácter asociado a ella. Por ejemplo, las teclas como Ctrl, Shift, Alt, Esc, Flechas, etc. no generarán un evento keypress, pero sí un evento keydown y keyup.
Escucha de eventos en Javascript
Otra diferencia es que no puedes devolver false para evitar el comportamiento por defecto en React. Debes llamar a preventDefault explícitamente. Por ejemplo, con HTML plano, para evitar el comportamiento por defecto del formulario de envío, puedes escribir:
Aquí, e es un evento sintético. React define estos eventos sintéticos de acuerdo con la especificación del W3C, por lo que no tienes que preocuparte por la compatibilidad entre navegadores. Los eventos de React no funcionan exactamente igual que los eventos nativos. Consulta la guía de referencia de SyntheticEvent para saber más.
Cuando se define un componente utilizando una clase ES6, un patrón común es que el controlador de eventos sea un método de la clase. Por ejemplo, este componente Toggle muestra un botón que permite al usuario alternar entre los estados “ON” y “OFF”:
El problema con esta sintaxis es que se crea un callback diferente cada vez que el LoggingButton se renderiza. En la mayoría de los casos, esto está bien. Sin embargo, si esta llamada de retorno se pasa como una proposición a componentes inferiores, esos componentes podrían hacer una re-presentación extra. Por lo general, recomendamos la vinculación en el constructor o el uso de la sintaxis de los campos de clase, para evitar este tipo de problema de rendimiento.
Evento personalizado en Javascript
Detener el burbujeoUn evento de burbujeo va desde el elemento objetivo hacia arriba. Normalmente va hacia arriba hasta <html>, y luego al objeto documento, y algunos eventos incluso llegan a la ventana, llamando a todos los manejadores en la ruta.
Normalmente no hay necesidad real de evitar el burbujeo. Una tarea que aparentemente requiere eso puede ser resuelta por otros medios. Uno de ellos es usar eventos personalizados, los cubriremos más adelante. También podemos escribir nuestros datos en el objeto de evento en un manejador y leerlos en otro, así podemos pasar a los manejadores en los padres información sobre el procesamiento de abajo.
Es decir: para un clic en <td> el evento primero pasa por la cadena de ancestros hasta el elemento (fase de captura), luego llega al objetivo y se dispara allí (fase de objetivo), y luego sube (fase de burbujeo), llamando a los manejadores en su camino.
De hecho, la fase de captura era invisible para nosotros, porque los manejadores añadidos usando la propiedad on<event> o usando atributos HTML o usando addEventListener(event, handler) de dos argumentos no saben nada de la captura, sólo se ejecutan en las fases 2 y 3.
Función de evento en Javascript
</html>Salida:Después de hacer clic en el botón, se obtiene el siguiente mensaje de alerta: Evento OnekeyupEste evento es un evento de teclado y se utiliza para ejecutar instrucciones cada vez que se suelta una tecla después de pulsarla. El siguiente ejemplo muestra el funcionamiento del evento:<! doctype html>
</html>Salida:El cuadro de color aparece antes de pasar el ratón. En cuanto se pasa el ratón por encima de la caja, ésta desaparece. Evento OnloadEl evento onload se evoca cuando un elemento se carga completamente. Tomemos un ejemplo y veamos cómo funciona:<!doctype html>
