Eventos

Un evento en JavaScript es una acción o suceso que ocurre en el navegador que interactúa con una página web, como clics, movimientos del mouse, pulsaciones de teclas, cambios en un formulario, etc. Estos eventos pueden ser utilizados para ejecutar código JavaScript, lo que permite crear páginas web interactivas y dinámicas.

Tipos de eventos

Existen muchos tipos de eventos. Algunos de los más comunes son:

Eventos del Mouse: como click, mouseover, mouseout, mousedown, mouseup.
Eventos del Teclado: como keydown, keyup, keypress.
Eventos de Formulario: como submit, change, focus, blur.
Eventos de la Ventana: como load, resize, scroll.

Escuchar eventos

querySelector es una función de JavaScript utilizada para seleccionar el primer elemento dentro del documento que coincide con un especificador de grupo de selectores CSS dado. Funciona en cualquier objeto que sea un Document, un DocumentFragment, o un Element.

Sintaxis Básica: element = document.querySelector(selectors);

element: Es el primer elemento del documento que coincide con el grupo de selectores especificado. Si no hay coincidencias, devuelve null.
selectors: Una cadena de texto que contiene uno o más selectores CSS separados por comas.

Uso de querySelector

Seleccionar por ID: Si quieres seleccionar un elemento con un ID específico, usarías # seguido del ID. Por ejemplo, document.querySelector('#miID').
Seleccionar por Clase: Para seleccionar un elemento por su clase, usarías . seguido del nombre de la clase. Por ejemplo, document.querySelector('.miClase').
Seleccionar por Etiqueta: Simplemente especifica el nombre de la etiqueta, como document.querySelector('div').
Selectores Compuestos: Puedes combinar selectores para ser más específico. Por ejemplo, document.querySelector('div.miClase') seleccionaría el primer div que también tiene la clase miClase.

Objeto de Evento

El objeto event en JavaScript es un objeto que proporciona información detallada sobre el evento que ha ocurrido. Este objeto es automáticamente pasado como argumento a la función que maneja el evento. Los eventos pueden ser cosas como hacer clic en un botón, presionar una tecla del teclado, mover el mouse, etc. Cada tipo de evento tiene propiedades y métodos específicos asociados con él, pero hay varios atributos y métodos comunes a todos los eventos.

Ejemplo:

document.addEventListener('click', function(event) {

console.log('Hiciste clic en', event.target);

});

Propagación de Eventos

Los eventos en JavaScript se propagan en dos fases: captura y burbuja. Esto significa que un evento puede ser capturado antes de llegar a su destino (fase de captura) o después (fase de burbuja). Puedes controlar en qué fase quieres escuchar el evento.

Page updated

Google Sites

Report abuse