DOM - Eventos y agregando HTML
🏁 Objetivos
- Que te introduzcas al manejo de eventos y sus conceptos principales
- Que comprendas lo que es un callback y cómo se propagan los eventos
- Que te familiarices con algunos de los eventos más comunes
- Que puedas modificar el DOM insertando código HTML
📝 Contenidos
Eventos
- Qué es un event handler
- Eventos de mouse y teclado
- El objeto
Event
🚀 Recursos de la clase
📆 Fecha 19/07/2021
👩💻 Código
💪 Ejercitación:
Hacela punto por punto. No trates de resolver todo a la vez.
Vamos a crear una página para jugar a resolver una pregunta . Se espera que la misma:
1) Tenga dos span. El primero con una pregunta, o adivinanza. El segundo inicialmente estará vacío. Que tenga tres botones con posibles respuestas. 2) Al clickear la respuesta correcta, el botón debe ponerse de color verde 3) Una vez logrado 3, que ademas el texto del segundo span se actualice mostrando ¡Respuesta correcta!; 4) Una vez logrado el punto 3, si se clickea una respuesta incorrecta, se debe mostrar el botón con la respuesta correcta con un color de fondo verde y los otros dos con un color de fondo rojo. 5) Una vez logrado el punto 4, el texto del segundo span debe actualizarse mostrando ¡Respuesta equivocada!.
📚 Material de lectura
En inglés
- Introduction to Events - MDN
- Introduction to Browser Events
- Bubbling and capturing
- Mouse events
- Moving the mouse
- Keyboard events
🔍 Para seguir investigando
En inglés