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