T5.14 Eventos🔗
Empezamos en septiembre con el contenido semántico de internet, el HTML.
Después continuamos poniendo las bases de como maquillamos ese contenido con el CSS.
Además incidimos en un mundo moderno e hiperconectado donde cada persona se conecta desde donde quiere (pc, móvil, tablet...) y que nuestra información debe ser atractiva SIEMPRE con FLEX y GRID.
Y dimos paso a las bases de Javascript que nos han llevado a este momento: interacción con el usuario con los eventos.
Existen 3 modos de asociar eventos a funciones:
- En las etiquetas html. NUNCA ya que queremos la separación contenido-presentación-acción.
- En el código
elemento.onclick = metodo;. Esto asocia un único método para cada evento y no permite opciones. NO usar. - La buena:
`elemento.addEventListener(evento, metodo, [opciones]);.
Aunque nosotros vamos a realizar una operativa simple, emplearemos SIEMPRE el método 3, addEventListener(), no considerándose correctos ninguno de los dos anteriores.
HTML events🔗
| HTML | addEventListener() | Description |
|---|---|---|
| onchange | change | An HTML element has been changed |
| onclick | click | The user clicks an HTML element |
| onmouseover | mouseover | The user moves the mouse over an HTML element |
| onmouseout | mouseout | The user moves the mouse away from an HTML element |
| onkeydown | keydown | The user pushes a keyboard key |
| onkeyup | keyup | El usuario “suelta” la tecla |
| onload | DOMContentLoaded | The browser has finished loading the page |
The list is much longer: W3Schools JavaScript Reference HTML DOM Events.
Fuente: [W3]
Menos habituales:
- onmousedown: cuando pulsamos “sobre” un elemento.
- onmouseup: cuando soltamos “sobre” un elemento.
onmousedown vs click: click requiere que se pulse y suelte “sobre” el elemento.
Intercambio de datos🔗
Vistas las herramientas de captura de elementos y eventos, estamos en disposición de tomar datos de los elementos capturados o volcar sobre ellos.
Propagación de eventos🔗
La gestión de eventos en JS es bastante más amplia que lo visto. Puedes ampliar aquí
evento.preventDefault()🔗
Podemos detener la gestión por defento con evento.preventDefault()