14. L'etiqueta <script> i els gestors d'esdeveniments

 

Índex

Quan s'executen els programes?

Segons el moment en què s'esdevinguin, les accions produïdes sobre un document mitjançant l'ús del JavaScript es poden dividir en dos grans grups:

En el primer cas les especificacions queden delimitades per dues etiquetes pròpies de l'HTML, que són <script>... </script>.

En el segon cas les especificacions van dins una etiqueta d'HTML i són activades per uns atributs especials anomenats gestors d'esdeveniments.

 

Execució de Javascript mentre es carrega un document: <script>

Les instruccions que s'hagin d'executar mentre es carrega el document es situen entre <script> i </script>, segons l'esquema següent:

Les instruccions poden ésser qualssevol, però, com sempre, és recomanable que consisteixin en funcions d'usuari prèviament definides a HEAD o a l'exterior del document.

Exemple

 

Gestors d'esdeveniments

Els gestors d'esdeveniments (event handlers) són un conjunt d'atributs que s'inclouen dins les etiquetes d'un element HTML.

L'acció dels gestors d'esdeveniments té tres aspectes distintius:

En els exemples vistos fins ara l'element actiu ha estat un botó i l'esdeveniment previst fer clic. La fórmula general és la següent:

Els gestors d'esdeveniments han estat tipificats pel W3C; tots comencen per on, que podem traduir per quan. Actuen en diversos moments posteriors a la càrrega del document que els conté:

automàticament, immediatament després de la càrrega. onLoad
quan l'usuari fa alguna cosa. onMouseOver, onMouseOut, onClick, etc.
automàticament, en descarregar-se el document (suport parcial) onUnload

 

Canvis en acabar la càrrega d'un document

Per aconseguir un canvi en el mateix moment en què s'acaba la càrrega d'un document, es posa el gestor d'esdeveniments onLoad dins <body>:

Exemple

 

Fer clic sobre un element

El gestor d'esdeveniments onClick permet detectar el clic que fem sobre un botó, amb la qual cosa s'engega l'acció que li hagi estat assignada:

Exemple

El gestor d'esdeveniments onClick pot actuar no solament sobre un botó sinó també sobre altres elements, com ara una imatge o un element de text:

Exemple