Flashcards
Eventos de JS
Cards in this deck (19)
- 1click Categoría: Eventos de ratón Descripción: Se dispara cuando el usuario hace clic en un elemento.En el código, se selecciona el elemento con id="miElemento" y se usa addEventListener para escuchar el evento click, que ejecuta una función que imprime un mensaje en la consola.
- 2dblclick Categoría: Eventos de ratón Descripción: Se dispara al hacer doble clic en un elemento.Al hacer doble clic sobre el elemento con id="miElemento", se ejecuta la función que muestra el mensaje "Doble clic en el elemento" en la consola.
- 3mauseover categoría: Eventos de ratón Descripción: Se dispara cuando el puntero del ratón entra en el área de un elemento.Al pasar el puntero sobre el elemento, el mensaje "El puntero está sobre el elemento" se muestra en la consola.
- 4mouseout categoría: Eventos de ratón Descripción: Se dispara cuando el puntero del ratón sale del área de un elemento.En el código, al mover el ratón fuera del área del elemento, se imprime el mensaje "El puntero salió del elemento".
- 5mousedown categoría: Eventos de ratón Descripción: Ocurre cuando se presiona un botón del ratón sobre un elemento.En este caso, al hacer clic y mantener presionado el ratón sobre el elemento, se imprime "Botón del ratón presionado sobre el elemento".
- 6mouseup Categoría: Eventos de ratón Descripción: Ocurre cuando se suelta un botón del ratón sobre un elemento.El mensaje "Botón del ratón soltado sobre el elemento" se muestra cuando el botón del ratón es soltado sobre el elemento.
- 7mousemove Categoría: Eventos de ratón Descripción: Se dispara continuamente mientras el ratón se mueve sobre un elemento.Aquí, cada vez que el ratón se desplaza sobre el elemento, se imprime "El ratón se está moviendo sobre el elemento".
- 8contextmenu Categoría: Eventos de ratón Descripción: Ocurre cuando se hace clic derecho para abrir el menú contextual.En el ejemplo, el event.preventDefault() evita que se muestre el menú contextual por defecto del navegador, y en su lugar, imprime "Se abrió el menú contextual".
- 9keydown Categoría: Eventos de teclado Descripción: Ocurre cuando se presiona una tecla.document.addEventListener("keydown", (event) => {
console.log("Tecla presionada:", event.key);
}); - 10keyup Categoría: Eventos de teclado Descripción: Ocurre cuando se suelta una tecla.document.addEventListener("keyup", (event) => {
console.log("Tecla soltada:", event.key);
}); - 11submit Categoría: Eventos de Formulario Descripción: Se dispara cuando un formulario es enviado.document.getElementById("miFormulario").addEventListener("submit", (event) => {
event.preventDefault(); // Evita el envío del formulario
console.log("Formulario enviado");
}); - 12input Categoría: Eventos de formulario Descripción: Ocurre cuando un valor es cambiado en un campo de formulario.document.getElementById("campoTexto").addEventListener("input", () => {
console.log("Valor modificado en el campo de texto");
}); - 13focus Categoría: Eventos de formulario Descripción: Ocurre cuando un elemento (campo de texto) recibe el foco.document.getElementById("campoTexto").addEventListener("focus", () => {
console.log("Campo de texto enfocado");
}); - 14blur Categoría: Eventos de formulario Descripción: Ocurre cuando un elemento pierde el foco.document.getElementById("campoTexto").addEventListener("blur", () => {
console.log("Campo de texto desenfocado");
}); - 15change Categoría: Eventos de formulario Descripción: Se dispara cuando cambia el valor de un elemento y se pierde el foco.document.getElementById("campoSeleccion").addEventListener("change", () => {
console.log("Valor cambiado en el campo de selección");
}); - 16reset Categoría: Eventos de formulario Descripción: Ocurre cuando un formulario es reseteado.document.getElementById("miFormulario").addEventListener("reset", () => {
console.log("Formulario reseteado");
}); - 17dragstart Categoria: Eventos de Drag y Drop Descripción: Se dispara cuando se inicia el arrastre de un elemento.document.getElementById("arrastrable").addEventListener("dragstart", (event) => {
console.log("Arrastre iniciado");
event.dataTransfer.setData("text", event.target.id); // Guardar el ID del elemento arrastrado
}); - 18dragover Categoría: Eventos de Drag y Drop Descripción: Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado.document.getElementById("areaSoltar").addEventListener("dragover", (event) => {
event.preventDefault(); // Permite que el elemento sea soltado en esta área
console.log("Elemento sobre el área de soltado");
}); - 19dragend Categoria: Eventos de Drag y Drop Descriocion: Ocurre cuando se termina de arrastrar un elemento.document.getElementById("arrastrable").addEventListener("dragend", () => {
console.log("Arrastre finalizado");
});
Information
- Description
- Flashcards on Eventos de JS, created by Aida Reyes on 28/10/2024.
- Created by
- Aida Reyes
- Views
- 10
- Rating