T5.14 Eventos¶
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.
Captura del contenido¶
Obtener el contenido html:
javascript
document.querySelector("#nombre").innerHTML
Obtener sólo el texto del contenido:
javascript
document.querySelector("#nombre").innerText
// o todo el texto (incluído el oculto)
document.querySelector("#nombre").textContent
Podríamos obtener también el html del propio elemento con outerHTML, útil si queremos copiarlo o guardarlo.
Captura del valor¶
Acceso a valores por elementos: Si partimos de un formulario tenemos varias formas de realizarlo.
Una forma sencilla y estructurada de hacerlo es mediante la selección del elemento y el atributo .value:
let nombre = document.querySelector('#nombre').value;
Hay horas fórmulas para obtener el mismo resultado, pero NO las utilizaremos en ningún caso.
Escritura del contenido¶
//... captura de elemento
elemento.innerHTML = "Hello World!";
O sólo el texto con innerText o textContent (ver diferencias)
Protección frente a XSS¶
XSS o cross-side scripting...
// Malo: inyección HTML directa
elemento.innerHTML = userInput;
// Bueno: usar textContent o sanitizar
elemento.textContent = userInput;
// o
elemento.innerHTML = DOMPurify.sanitize(userInput);