Gestió d'esdeveniments¶
Esdeveniments de pàgina i formularis¶
Tenen lloc quan hi ha canvis a la finestra del navegador o bé interacció de l'usuari amb elements d'un formulari
onload¶
Té lloc quan l'element associat acaba de carregar-se completament.
S'utilitza principalment amb l'element <body> però és útil per qualsevol element que pugui tenir un temps de càrrega variable (per exemple <img>)
onbeforeunload¶
S'aplica a l'objecte window i s'executa just abans de tancar o recarregar la pàgina i quan el document encara és visible.
La seva utilitat principal és fer aparèixer un diàleg de confirmació demanant a l'usuari si realment vol tancar la pàgina, per exemple quan hi ha dades que potser encara no s'han guardat, evitant així que es perdin per error.
Per fer aparèixer el quadre de diàleg és necessari executar el mètode preventDefault() de l'objecte.
window.onbeforeunload = function(e) {
e.preventDefault()
}
onresize¶
Té lloc quan es modifiquen les dimensions de l'element associat.
És útil per forçar el redibuixat d'elements de la pàgina quan canvia la mida de la finestra del navegador.
onscroll¶
Té lloc quan es mou la barra de desplaçament (en fer scroll) de l'element associat.
Amb les propietats scrollTop i scrollLeft podem llegir i modificar el seu desplaçament en píxels, fins i tot encara que les barres de desplaçament estiguin ocultes (overflow: hidden).
Per llegir la posició de scroll de l'objecte window ho hem de fer amb les propietats scrollX i scrollY.
onfocus | onblur¶
Detecten el moment en que l'element que té l'esdeveniment corresponent associat guanya (focus) o perd (blur) el focus, per exemple quan s'ha situat o tret el cursor d'edició de text d'un control <input> o <textarea>.
onchange¶
Té lloc quan canvia el valor d'un element <input>, <select> o <textarea> en aquests casos:
- Quan un element
<input>o<textarea>perd el focus i el seu contingut havia canviat - Quan es marca o desmarca un element
<input type="checkbox"> - Quan es marca un element
<input type="radio">, però no quan es desmarca - Quan l'usuari selecciona un valor d'un desplegable
<select>, una data d'un<input type="date">o un fitxer d'un<input type="file">
oninput¶
Té lloc quan canvia el valor d'un element <input>, <select> o <textarea>.
A diferència de l'esdeveniment onchange, detecta immediatament qualsevol canvi produït.
onselect¶
Detecta quan s'ha finalitzat de seleccionar text dins del control d'edició que tingui associat.
oncut | oncopy | onpaste¶
Detecta quan l'usuari talla / copia / enganxa el contingut d'un element al porta-retalls.
Són útils per poder cancel·lar el comportament per defecte utilitzant el mètode preventDefault.