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()