Eventos en JavaScript | Explicado con ejemplos
Se sabe que JavaScript le da a una página web la capacidad de "pensar y actuar", lo cual es posible debido a eventos. Los eventos actúan como desencadenantes que impulsan los guiones de backend a realizar acciones. Se pueden referir fácilmente como "cosas" Eso sucede en una página web, estos eventos pueden ser cualquier cosa: cargar una página web, hacer clic en un botón HTML o pasar el mouse sobre un elemento HTML específico.
Hay miles de millones de eventos que pueden activar JavaScript, tenemos eventos para activar una función en el clic del mouse o en el mouse, pero vamos a cubrir trabajar con eventos y JavaScript.
A continuación se muestra un ejemplo simple de un evento de JavaScript en un botón a continuación:
Manipuladores de eventos
Los eventos son administrados por los manejadores de eventos; HTML proporciona la capacidad de agregar varios tipos de controladores de eventos en sus elementos, estos controladores de eventos permiten al programador ejecutar el código JavaScript ejecutando una función.
Hay 3 tipos de manejadores de eventos:
- Oyente dom-on-event
- Oyente de eventos en línea
- método addEventListener ()
El oyente de Dom On-Event
Podemos usar oyentes de eventos en las propiedades DOM, como activar un evento en la carga completa de la página web. Estos oyentes de eventos también se pueden agregar a los elementos HTML, pero con la restricción es un oyente de eventos por cada elemento HTML.
Por ejemplo, queremos alertar al usuario sobre la carga completa de la página web, podemos hacerlo accediendo al objeto de la ventana del DOM:
Después de ejecutar el archivo HTML, verá la siguiente salida:
Como puede ver, después de cargar completamente la página web, JavaScript alerta al usuario que la página web ha cargado.
Nota: El objeto de la ventana se utiliza para trabajar en eventos globales.
El oyente de eventos en línea
Uno de los métodos triviales Cuando se trabaja con HTML y JavaScript es usar los oyentes de eventos en línea, lo hacemos agregando el oyente de eventos como un atributo del elemento dentro de su etiqueta.
Por ejemplo, en el ejemplo anterior, agregamos un "al hacer clic()" Evento dentro del elemento del botón, cuando usamos el oyente del evento en línea, lo establecemos igual a una función que se invocará cuando se active el evento.
Como se puede ver, btnClicked () ¿Es la función que se ejecutará con un botón clic?.
Si queremos imprimir la cadena en la consola "Has presionado el botón", podemos hacerlo escribiendo el btnClicked () función de esta manera:
Cuando ejecuta el archivo HTML, obtiene la siguiente salida.
Usando addEventListener ()
El tercer controlador de eventos se agrega utilizando el método AddEventListener (), esta es la forma nueva y más utilizada de manejar eventos en JavaScript; Para mostrar esto, vamos a crear un DIV en HTML usando las siguientes líneas de código:
Ejemplo de addEventListener ()
Para agregar un oyente de eventos sobre esto div Vas a usar el siguiente fragmento de script:
Si observa de cerca el fragmento de script, notará que estamos agregando 3 oyentes de eventos diferentes en este DIV, uno cuando el cursor ingresa al DIV, segundo cuando el cursor deja el DIV y el último cuando el cursor hace clic en el Div; Después de escribir todo este código, guárdelo, vuelva a cargar la página y obtendrá el siguiente resultado:
Como puede ver en la consola, nuestros controladores de eventos están funcionando y el código JavaScript se está ejecutando.
Eso es todo para eventos en JavaScript
Conclusión
Los eventos en JavaScript son la ocurrencia de tales instancias que llevan al JavaScript a realizar alguna manipulación en los elementos HTML o que realicen funcionalidad de fondo. El evento en JavaScript se utiliza para dar a la página web HTML la capacidad de pensar y realizar acciones, estos eventos pueden ser cualquier cosa que haga un usuario: hacer clic en un botón, presionar una tecla específica o un movimiento específico del mouse. También hay algunos eventos globales a los que se puede acceder utilizando el objeto de la ventana, como la ventana.carga(). Aprendimos sobre varios tipos de manejadores de eventos junto con sus ejemplos.