JavaScript: Esdeveniments DOM
De Wikimir
En aquest article de JavaScript s'aborda tot allò relacionat amb els edeveniments del JavaScript: DOM.
Contingut
Model d'esdeveniments
Un esdeveniment és una acció que desencadena un usuari quan interactua amb la pàgina. Si hi ha un gestor d’esdeveniments associat s’encarregarà de capturar-lo i gestionar-lo. Aquest gestor pot ser propi o pot venir definit per defecte en alguns elements (per exemple al fer click en un enllaç).
El model d’esdeveniments forma part del DOM i podem afegir gestors d’esdeveniments a qualsevol element del document que ho suporti.
DOM té una especificació de tres nivells:
- Nivell 1: onclick, onmouse...
- Nivell 2: addEventListener, removeEventListener, etc
- Nivell 3: Més baix nivell. Podem disparar esdeveniments des del propi JavaScript
Nivell 1
| Esdeveniment | Descripció | Elements per als quals està definit |
|---|---|---|
| onblur | Deseleccionar l'element | <button> <input> <label> <select> <textarea> <body> |
| onchange | Modificació en l'element seleccionat | <input> <select> <textarea> |
| onclick | Punxar i deixar anar el ratolí | Tots els elements |
| ondblclick | Punxar dues vegades seguides amb el ratolí | Tots els elements |
| onfocus | Seleccionar un element | <button> <input> <label> <select> <textarea> <body> |
| onkeydown | Prémer una tecla i no deixar-la anar | Elements de formulari i <body> |
| onkeypress | Prémer una tecla | Elements de formulari i <body> |
| onkeyup | Deixar anar una tecla premuda | Elements de formulari i <body> |
| onload | Pàgina carregada completament | <body> |
| onmousedown | Prémer un botó del ratolí i no deixar-lo anar | Tots els elements |
| onmousemove | Moure el ratolí | Tots els elements |
| onmouseout | El ratolí "surt" de l'element | Tots els elements |
| onmouseover | El ratolí "entra" en l'element | Tots els elements |
| onmouseup | Deixar anar el botó del ratolí | Tots els elements |
| onreset | Inicialitzar el formulari | <form> |
| onresize | Modificar la mida de la finestra | <body> |
| onselect | Seleccionar un text | <input> <textarea> |
| onsubmit | Enviar el formulari | <form> |
| onunload | S'abandona la pàgina, per exemple en tancar el navegador | <body> |
Formes d'associacions
Hi ha diferents formes d’associar un element a un gestor d’esdeveniment de nivell 1:
- Directament com un atribut XHTML del element:
<input type = "button" value = "Prem" onclick = "alert ('Hola món');" />
Podem accedir a l’element desencadenant amb la propietat this:
<input type = "button" value = "Prem" onclick = "this.value = 'Premut’ />
- Directament com un atribut XHTML, però passant el nom d’una funció:
<input type = "button" value = "Prem" onclick = "HolaMon ()" />
- La millor forma, separant el codi de l’HTML:
document. getElementById ('botó'). onclick = function () {alert ('Hola Món.');}
