39986112
Descrição
FlashCards por ROBERTO AGUSTIN, atualizado 15 dias atrás
|
Criado por ROBERTO AGUSTIN
18 dias atrás
|
|
| Questão | Responda |
|
ALUMNO: Roberto Agustín Zavaleta
MATRICULA: 20230568
TIDSM-G1
Image:
Ut (binary/octet-stream)
|
CREACION DE FICHAS DE ESTUDIO TEMA: Eventos en JS |
| EVENTOS DE RATON | Estos eventos son fundamentales para la creación de interfaces interactivas y permiten a los desarrolladores responder a las acciones del usuario de diversas maneras. |
|
click: Se dispara cuando el usuario hace un clic en un elemento. La sintaxis es la siguiente:
object.addEventListener("click",myScript);
Image:
Click (binary/octet-stream)
|
Explicación del código: Agregamos el evento click al texto p con id "demo". En la función "myFunction" da un mensaje de que se ha dado un clic en el párrafo mostrado cada ves que esto ocurre por el usuario. |
| dbclick: Se dispara al hacer doble clic en un elemento. La sintaxis de este evento es: object.addEventListener("dblclick", myScript); | Explicación del código: Agregamos el evento dbclick al texto p con id "demo". En la funcion "myFunction" da un mensaje de que se ha dado doble clic en el mensaje cada ves que esto ocurre por el usuario. |
| mouseover: Se dispara cuando el puntero del ratón entra en el área de un elemento. Sintaxis: object.addEventListener("mouseover", myScript); | mouseout: Se dispara cuando el puntero del ratón sale del área de un elemento. Sintaxis: object.addEventListener("mouseout", myScript); |
| Ejemplo con ambos eventos: <mouseout>, <mouseover> | Explicación del código: Asignamos eventos mouseover y mouseout al h1 elemento con id "demo". Función mouseOver: Cambia el color del texto del h1 a rojo cuando el ratón pasa sobre él. Función mouseOut: Cambia el color del texto del h1 a negro cuando el ratón sale del elemento. |
| mousedown: Ocurre cuando se presiona un botón del ratón sobre un elemento. Sintaxis: object.addEventListener("mousedown", myScript); | mouseup: Ocurre cuando se suelta un botón del ratón sobre un elemento. Sintaxis: object.addEventListener("mouseup", myScript); |
| Ejemplo con ambos eventos: <mousedown, mouseup> | Explicación del código: Primero agregamos el evento a un texto con el id "demo" y creamos la función. Esta función hace que cada ves que el mouse este presionando sobre el texto se imprimirá el mensaje de Function mouseDown(), en el caso contrario se mostrara lo que contiene function mouseUp(). |
| mousemove: Se dispara continuamente mientras el ratón se mueve sobre un elemento. Sintaxis: object.addEventListener("mousemove", myScript); | Explicación del código: Se añade un manejador de eventos al div con id "myDIV" que llama a la función myFunction cada vez que el mouse se mueve sobre el div. Luego en la función se obtiene las coordenadas X e Y del cursor del mouse utilizando e.clientX y e.clientY para crear una cadena con las coordenadas del cursor y asi cada que el mouse pasa por el div, se muestran en tiempo real las coordenadas. |
| contextmenu: Ocurre cuando se hace clic derecho para abrir el menú contextual. Sintaxis: object.addEventListener("contextmenu", myScript); | Explicacion del codigo: Se asigna un evento de clic derecho (contextmenu) al div 01 que ejecuta myFunction. La función myFunction muestra el contenido oculto del div con id "myDiv". |
| EVENTOS DE TECLADO | Estos eventos son esenciales para capturar y responder a las entradas del usuario de manera efectiva. |
| keydown: Ocurre cuando se presiona una tecla. Sintaxis: object.addEventListener("keydown", myScript); | Explicación del código: Tenemos un imput el cual se identifica con el id "demo", le agregamos el evento y creamos la función el cual se ejecutara dando color al cuadro de texto del imput cada que se presione una tecla. |
|
keyup: Ocurre cuando se suelta una tecla.
Sintaxis:
object.addEventListener("keyup", myScript);
Image:
Keyup (binary/octet-stream)
|
Explicación del código: Se crea un campo de texto <input> con el atributo id="fname". Luego, agregamos el evento al campo de texto para detectar cada vez que se presiona una tecla ("keyup"). En la función myFunction(), toma el valor actual del campo de texto (x.value), y lo convierte a mayúsculas usando el método .toUpperCase(), |
| EVENTOS DE FORMULARIO | Estos eventos son fundamentales para gestionar la entrada de datos y la validación de formularios en aplicaciones web. |
|
submit: Se dispara cuando un formulario es enviado.
Sintaxis:
object.addEventListener("submit", myScript);
Image:
Submit (binary/octet-stream)
|
Explicación del código: Aquí creamos un formulario simple y lo identificamos con un id, agregamos el evento y al ejecutarlo esta nos da una alerta de que el formulario ha sido enviado. |
|
input: Ocurre cuando un valor es cambiado en un campo de formulario.
Sintaxis:
object.addEventListener("input", myScript);
Image:
Input (binary/octet-stream)
|
Explicación del código: Se activa cada vez que se modifica el valor del campo de entrada que es "p", y ejecuta la función cada que detecta un cambio en tiempo real. |
|
focus: Ocurre cuando un elemento (campo de texto) recibe el foco.
Sintaxis:
object.addEventListener("focus", myScript);
Image:
Focus (binary/octet-stream)
|
Explicación del código: Cuando el campo de entrada recibe el foco (por ejemplo, al hacer clic en él), la función myFunction se ejecuta. Dentro de myFunction, se cambia el color de fondo del campo de entrada a rojo usando style.backgroundColor = "red". Es decir, cuando el usuario selecciona el campo de entrada, su fondo cambia a color rojo, dándole una indicación visual de que está enfocado en ese campo. |
|
blur: Ocurre cuando un elemento pierde el foco.
Sintaxis:
object.addEventListener("blur", myScript);
Image:
Blur (binary/octet-stream)
|
Explicación del código: Este evento se activa cuando el usuario sale del campo de entrada (al hacer clic en otro lado o al presionar Tab para moverse a otro campo). Cuando esto ocurre, el mensaje "Campo perdió el foco" se muestra en la consola. |
|
change: Se dispara cuando cambia el valor de un elemento y se pierde el foco.
Sintaxis:
object.addEventListener("change", myScript);
Image:
Change (binary/octet-stream)
|
Explicación del código: El evento change se activa cuando el usuario cambia el valor del campo de entrada y luego sale del campo. En ese momento, el mensaje "Valor del campo cambió" se muestra en la consola. |
|
reset: Ocurre cuando un formulario es reseteado.
Sintaxis:
object.addEventListener("reset", myScript);
Image:
Reset (binary/octet-stream)
|
Explicación del código Cuando el usuario hace clic en el botón de "Reset", el evento reset se activa. Esto muestra una alerta con el mensaje "Formulario reseteado" y los campos del formulario vuelven a sus valores iniciales. |
| OTROS EVENTOS COMUNES | Los eventos DOMContentLoaded, load, resize y scroll son tipos de eventos en el contexto del desarrollo web que permiten a los desarrolladores interactuar con el comportamiento de la página y la experiencia del usuario. |
|
DOMContentLoaded: Ocurre cuando el HTML ha sido completamente cargado.
Sintaxis:
object.addEventListener("DOMContentLoaded", myScript);
Image:
Dom (binary/octet-stream)
|
Explicación del código: Este evento se dispara automáticamente cuando el navegador termina de cargar y procesar el HTML, antes de cargar los recursos como imágenes. Al activarse, muestra "HTML completamente cargado" en la consola. |
|
load: Ocurre cuando la página completa (imágenes, scripts, etc.) ha cargado.
Sintaxis:
object.addEventListener("load", myScript);
Image:
Load (binary/octet-stream)
|
Explicación del código: El evento load se activa cuando toda la página y todos sus recursos (como imágenes, scripts y hojas de estilo) se han cargado completamente. En ese momento, se imprime "Página completamente cargada" en la consola. |
|
resize: Ocurre cuando la ventana del navegador cambia de tamaño.
Sintaxis:
object.addEventListener("resize", myScript);
Image:
Resize (binary/octet-stream)
|
Explicación del código: Este evento se activa cada vez que el tamaño de la ventana del navegador cambia (por ejemplo, cuando el usuario ajusta el tamaño de la ventana). Cuando esto ocurre, se registra "Ventana redimensionada" en la consola. |
|
scroll: Ocurre cuando se desplaza la barra de scroll en la página o en un elemento
con scroll.
Sintaxis:
object.addEventListener("scroll", myScript);
Image:
Scroll (binary/octet-stream)
|
Explicación del código: Este evento se activa cuando el usuario hace scroll dentro del elemento div con id "myDIV". Cada vez que el usuario desplaza el contenido, se muestra "Te desplazaste en div" en la consola. |
| EVENTOS DE DRAG & DROP | Son interacciones que permiten a los usuarios mover elementos dentro de una interfaz gráfica de usuario (GUI) o entre diferentes aplicaciones mediante el uso del mouse o dispositivos táctiles |
| dragstart: Se dispara cuando se inicia el arrastre de un elemento. Sintaxis: object.addEventListener("dragstart", myScript); | Explicación del código: Aquí, el dragstart se activa en el elemento con id="dragElement" cuando el usuario inicia el arrastre (es decir, hace clic en el elemento y lo comienza a mover). Al iniciarse, muestra un mensaje en la consola indicando que el arrastre ha comenzado. |
| dragover: Se dispara cuando un elemento arrastrado está sobre un objetivo de soltado. Sintaxis: object.addEventListener("dragover", myScript); | Explicación del código: El dragover se activa cuando el elemento arrastrado pasa sobre la zona de soltado (dropZone). Sin event.preventDefault(), el navegador no permitiría soltar el elemento en esa área. Con esta línea, indicamos que la zona acepta el elemento arrastrado, y cada vez que el elemento pasa sobre esta área, muestra un mensaje en la consola. |
|
drop: Ocurre cuando el elemento arrastrado se suelta en un objetivo de soltado.
Sintaxis:
object.addEventListener("drop", myScript);
Image:
Dorp (binary/octet-stream)
|
Explicación del código: Cuando el usuario suelta el elemento en la zona de soltado (dropZone), el evento drop se activa y muestra un mensaje en la consola. Este evento es esencial en aplicaciones de drag-and-drop, ya que indica que el arrastre se ha completado en la zona permitida. |
| dragend: Ocurre cuando se termina de arrastrar un elemento. Sintaxis: object.addEventListener("dragend", myScript); | Explicación del código: El evento dragend se dispara cuando el usuario deja de arrastrar el elemento, ya sea dentro o fuera de la zona de soltado. Esto muestra un mensaje en la consola indicando que el proceso de arrastre ha concluido. |
| EVENTOS DE MULTIMEDIA | Estos eventos permiten controlar y reaccionar ante las acciones que realiza el usuario sobre el contenido multimedia, como reproducir, pausar o detener un archivo. |
|
play: Ocurre cuando se empieza a reproducir un video o audio.
Sintaxis:
object.addEventListener("play", myScript);
Image:
Play (binary/octet-stream)
|
Explicación del código Cuando el usuario presiona el botón de "play" en el video (myVideo), el evento play se activa dando un mensaje en la consola. |
|
pause: Ocurre cuando se pausa un video o audio.
Sintaxis:
object.addEventListener("pause", myScript);
Image:
Pause (binary/octet-stream)
|
Explicación del código: Al pausar el video (myVideo), el evento pause se activa y muestra un mensaje en la consola. |
|
ended: Ocurre cuando un video o audio ha terminado de reproducirse.
Sintaxis:
object.addEventListener("ended", myScript);
Image:
End (binary/octet-stream)
|
Explicación del código: Cuando el video (myVideo) termina de reproducirse, el evento ended se activa y envía un mensaje de que ha finalizado en la consola. |
| EVENTOS DEL PORTAPAPELES | Estos eventos se pueden aplicar a elementos de la página web para controlar lo que el usuario hace con el contenido, ofreciendo así mayor control y personalización en la interacción con el texto o los datos de un formulario. |
|
copy: Se dispara cuando el contenido es copiado al portapapeles.
Sintaxis:
object.addEventListener("copy", myScript);
Image:
Copy (binary/octet-stream)
|
Explicación del código: El evento copy se activa en el campo de texto (textInput) cuando el usuario copia su contenido. |
|
cut: Ocurre cuando el contenido es cortado al portapapeles.
Sintaxis:
Image:
Cut (binary/octet-stream)
|
Explicación del código: El evento cut se activa cuando el usuario corta el contenido del campo de texto (textInput). Una vez ejecutado la función mostrará un mensaje en la consola. |
|
paste: Ocurre cuando se pega contenido desde el portapapeles.
Sintaxis:
object.addEventListener("paste", myScript);
Image:
Paste (binary/octet-stream)
|
Explicación del código: El evento paste se activa cuando el usuario pega contenido en el campo de texto (textInput). La función nos devuelve un mensaje en la consola de que el texto ha sido pegado desde el portapapeles. |
Quer criar seus próprios Flashcards gratuitos com GoConqr? Saiba mais.