Element <div> original:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver">
Secció de continguts...

Si no s'utilitza la variable this, el codi necessari per modificar el color de les vores, seria el següent:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="document.getElementById('continguts').style.borderColor='black';" onmouseout="document.getElementById('continguts').style.borderColor='silver';">
Secció de continguts...

El codi anterior és massa llarg i massa propens a cometre errors. Dins del codi d'un esdeveniment, Javascript crea automàticament la variable this, que fa referència a l'element XHTML que ha provocat l'esdeveniment. Així, l'exemple anterior es pot reescriure de la següent manera:

<div id="continguts" style="width:150px; height:60px; border:thin solid silver" onmouseover="this.style.borderColor='black';" onmouseout="this.style.borderColor='silver';">
Secció de continguts...

El codi anterior és molt més compacte, més fàcil de llegir i d'escriure i segueix funcionant correctament encara que es modifiqui el valor de l'atribut id de el < div >.

Manegadors d'esdeveniments com a funcions externes

La definició dels manegadores d'esdeveniments en els atributs XHTML és el mètode més senzill però menys aconsellable de tractar amb els esdeveniments en Javascript. El principal inconvenient és que es complica a l'excés quan s'afegeixen algunes poques instruccions, per la qual cosa solament és recomanable per als casos més senzills.

Si es realitzen aplicacions complexes, com per exemple la validació d'un formulari, és aconsellable agrupar tot el codi Javascript en una funció externa i cridar a aquesta funció des de l'element XHTML.

Seguint amb l'exemple anterior que mostra un missatge en clicar sobre un botó:

<input type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

Utilitzant funcions externes es pot transformar en:

function mostraMissatge() {
  alert('Gràcies per clicar');
}

<input type="button" value="Clica i veuràs" onclick="mostraMissatge()" />

Aquesta tècnica consisteix a extreure totes les instruccions de Javascript i agrupar-les en una funció externa. Una vegada definida la funció, en l'atribut de l'element XHTML s'inclou el nom de la funció, per indicar que és la funció que s'executa quan es produeix l'esdeveniment.

La crida a la funció es realitza de la forma habitual, indicant el seu nom seguit dels parèntesis i de forma opcional, incloent tots els arguments i paràmetres que es necessitin.

El principal inconvenient d'aquest mètode és que en les funcions externes no es pot seguir utilitzant la variable this i per tant, és necessari passar aquesta variable com a paràmetre a la funció:

function ressalta(element) {
	switch(element.style.borderColor) {
		case 'silver':
		case 'silver silver silver silver':
		case '#c0c0c0':
			element.style.borderColor = 'black';
			break;
		case 'black':
		case 'black black black black':
		case '#000000':
			element.style.borderColor = 'silver';
			break;
	}
}

<div style="width:150px; height:60px; border:thin solid silver" onmouseover="ressalta(this)" onmouseout="ressalta(this)">
Secció de continguts...

En l'exemple anterior, la funció externa és cridada amb el paràmetre this, que dins de la funció es denomina element. La complexitat de l'exemple es produeix sobretot per la forma en la qual els diferents navegadors emmagatzemen el valor de la propietat * borderColor.

Mentre que Firefox emmagatzema (en cas que les quatre vores coincideixin en color) el valor black, Internet Explorer ho emmagatzema com black black black black i Opera emmagatzema la seva representació hexadecimal #000000.

Manejadores d'esdeveniments semàntics

Els mètodes que s'han vist per afegir manejadores d'esdeveniments (com a atributs XHTML i com a funcions externes) tenen un greu inconvenient: "embruten" el codi XHTML de la pàgina.

Com és conegut, una de les bones pràctiques bàsiques en el disseny de pàgines i aplicacions web és la separació dels continguts (XHTML) i el seu aspecte o presentació (CSS). Sempre que sigui possible, també es recomana separar els continguts (XHTML) i el seu comportament o programació (Javascript).

Barrejar el codi Javascript amb els elements XHTML solament contribueix a complicar el codi font de la pàgina, a dificultar la modificació i manteniment de la pàgina i a reduir la semàntica del document final produït.

Afortunadament, existeix un mètode alternatiu per definir els manegadores d'esdeveniments de Javascript. Aquesta tècnica és una evolució del mètode de les funcions externes, ja que es basa a utilitzar les propietats DOM dels elements XHTML per assignar totes les funcions externes que actuen de manejadores d'esdeveniments. Així, el següent exemple:

<input id="clica" type="button" value="Clica i veuràs" onclick="alert('Gràcies per clicar');" />

Es pot transformar en:

// Funció externa
function mostraMissatge() {
alert('Gràcies per clicar');
}

// Assignar la funció externa a l'element
document.getElementById("clica").onclick = mostraMissatge;

// Element XHTML
<input id="clica" type="button" value="Clica i veuràs" />

La tècnica dels manegadores semàntics consisteix en:

• Assignar un identificador únic a l'element XHTML mitjançant l'atribut id.
• Crear una funció de Javascript encarregada de manejar l'esdeveniment.
• Assignar la funció externa a l'esdeveniment corresponent en l'element desitjat.
• L'últim pas és la clau d'aquesta tècnica. En primer lloc, s'obté l'element al que es desitja associar la funció externa:

document.getElementById("clica");

A continuació, s'utilitza una propietat de l'element amb el mateix nom que l'esdeveniment que es vol manejar. En aquest cas, la propietat és onclick:

document.getElementById("clica").onclick = ...

Finalment, s'assigna la funció externa mitjançant el seu nom sense parèntesi. El més important (i la causa més comuna d'errors) és indicar solament el nom de la funció, és a dir, prescindir dels parèntesis en assignar la funció:

document.getElementById("clica").onclick = mostraMissatge;

Si s'afegeixen els parèntesis després del nom de la funció, en realitat s'està executant la funció i guardant el valor retornat per la funció en la propietat onclick d'element.

// Assignar una funció externa a un esdeveniment d'un element
document.getElementById("clica").onclick = mostraMissatge;

// Executar una funció i guardar el seu resultat en una propietat d'un element
document.getElementById("clica").onclick = mostraMissatge();

El gran avantatge d'aquest mètode és que el codi XHTML resultant és molt "net", ja que no es barreja amb el codi Javascript. A més, dins de les funcions externes assignades sí que es pot utilitzar la variable this per referir-se a l'element que provoca l'esdeveniment.

L'únic inconvenient d'aquest mètode és que la pàgina s'ha de carregar completament abans que es puguin utilitzar les funcions DOM que assignen els manegadors als elements XHTML. Una de les formes més senzilles d'assegurar que cert codi es va a executar després que la pàgina es carregui per complet és utilitzar l'esdeveniment onload:

window.onload = function() {
document.getElementById("clica").onclick = muestraMensaje;
}

En el següent exemple, s'afegeixen esdeveniments als elements de tipus input=text d'un formulari complex:

function ressalta() {
	// Codi Javascript
}

window.onload = function() {
  var formulario = document.getElementById("formulario");
  var camposInput = formulario.getElementsByTagName("input");
 
  for(var i=0; i<camposInput.length; i++) {
    if(camposInput[i].type == "text") {
      camposInput[i].onclick = resalta;
    }
  }
}

Exercicis

Alert

Volem provar els events de la pàgina, per fer-ho posa un alert amb un missatge en els següents casos:

• Al carregar-se completament la pàgina.
• Al clicar en un botó
• Al passar damunt d'un paràgraf
• Al passar damunt d'una imatge
• Al sortir del damunt d'una imatge
• Al clicar en un enllaç

Exercici1 Events

Desplegable

Es vol disposar de un menu desplegable on cada element del desplegable sigui el nom de la pàgina a la cual fa referència. Quan es seleccioni una entrada del desplegable, el navegador canvia la seva url per la del desplegable.

Rollover

Un intercanvi d'imatge és una cosa grandiosa. L'usuari aproxima el punter del ratolí a una imatge i aquesta canvia a una altre imatge. Quan l'usuari abandona la imatge, torna a canviar a la imatge anterior. Fes un programa amb javascript que reprodueixi el comportament anterior.

Exercici2 Events

Mostras / Ocultar text

Donada la següent pàgina

<script type="text/javascript">
	function muestraOculta() {
	}
</script>
</head>

<body>

<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_1" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_2" href="#">Ocultar contenidos</a>

<br/>

<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed mattis enim vitae orci. Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis, faucibus ut, rhoncus non, mi. Duis pellentesque, felis eu adipiscing ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis scelerisque.</p>
<a id="enlace_3" href="#">Ocultar contenidos</a>

</body>

Realitza els següents apartats:

• Quan es cliqui sobre el primer enllaç, s'oculti la seva secció relacionada
• Quan es torni a clicar sobre el mateix enllaç, es mostri una altra vegada aquesta secció de continguts
• Completar la resta d'enllaços de la pàgina perquè el seu comportament sigui idèntic al del primer enllaç
• Quan una secció s'oculti, ha de canviar el missatge de l'enllaç associat (pista: propietat innerHTML)

Exercici3 Events

Obtenint informació de l'esdeveniment (objecte event)

Normalment, els manegadors d'esdeveniments requereixen informació addicional per processar les seves tasques. Si una funció per exemple s'encarrega de processar l'esdeveniment onclick, potser necessiti saber que posició estava el ratolí en el moment de punxar el botó.

No obstant això, el cas més habitual en el qual és necessari conèixer informació addicional sobre l'esdeveniment és el dels esdeveniments associats al teclat. Normalment, és molt important conèixer la tecla que s'ha premut, per exemple per diferenciar les tecles normals de les tecles especials (ENTER, tabulador, Alt, Ctrl., etc.).

Javascript permet obtenir informació sobre el ratolí i el teclat mitjançant un objecte especial anomenat event. Desafortunadament, els diferents navegadors presenten diferències molt notables en el tractament de la informació sobre els esdeveniments.

La principal diferència resideix en la forma en la qual s'obté l'objecte event. Internet Explorer considera que aquest objecte forma part de l'objecte window i la resta de navegadors ho consideren com l'únic argument que tenen les funcions manejadoras d'esdeveniments.

Encara que és un comportament que resulta molt estrany al principi, tots els navegadors moderns excepte Internet Explorer creen màgicament i de forma automàtica un argument que es passa a la funció manegadora, per la qual cosa no és necessari incloure-ho en la trucada a la funció manegadora. D'aquesta forma, per utilitzar aquest "argument màgic", només és necessari assignar-li un nom, ja que els navegadors ho creen automàticament.

En resum, en els navegadors tipus Internet Explorer, l'objecte event s'obté directament mitjançant:

var esdeveniment = window.event;
D'altra banda, en la resta de navegadors, l'objecte event s'obté màgicament a partir de l'argument que el navegador crea automàticament:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento;
}

Si es vol programar una aplicació que funcioni correctament en tots els navegadors, és necessari obtenir l'objecte event de forma correcta segons cada navegador. El següent codi mostra la forma correcta d'obtenir l'objecte event en qualsevol navegador:

function manejadorEventos(elEvento) {
var esdeveniment = elEvento || window.event;
}

Una vegada obtingut l'objecte event, ja es pot accedir a tota la informació relacionada amb l'esdeveniment, que depèn del tipus d'esdeveniment produït.

Informació sobre l'esdeveniment

La propietat type indica el tipus d'esdeveniment produït, la qual cosa és útil quan una mateixa funció s'utilitza per manejar diversos esdeveniments:

var tipus = esdeveniment.type;

La propietat type retorna el tipus d'esdeveniment produït, que és igual al nom de l'esdeveniment però sense el prefix on.

Mitjançant aquesta propietat, es pot refer de forma més senzilla l'exemple anterior en el qual es ressaltava una secció de continguts en passar el ratolí per damunt:

function ressalta(elEvento) {
    var esdeveniment = elEvento || window.event;
    switch(esdeveniment.type) {
         case 'mouseover':
               this.style.borderColor = 'black';
               break;
         case 'mouseout':
               this.style.borderColor = 'silver';
               break;
    }
}

window.onload = function() {
       document.getElementById("seccion").onmouseover = ressalta;
       document.getElementById("seccion").onmouseout = ressalta;
}
<div id="seccion" style="width:150px; height:60px; border:thin solid silver">
  Secció de continguts...
</div>

Informació sobre els esdeveniments de teclat

De tots els esdeveniments disponibles en Javascript, els esdeveniments relacionats amb el teclat són els més incompatibles entre diferents navegadors i per tant, els més difícils de manegar. En primer lloc, existeixen moltes diferències entre els navegadors, els teclats i els sistemes operatius dels usuaris, principalment a causa de les diferències entre idiomes.

A més, existeixen tres esdeveniments diferents per a les pulsacions de les tecles (onkeyup, onkeypress i onkeydown). Finalment, existeixen dos tipus de tecles: les tecles normals (com a lletres, nombres i símbols normals) i les tecles especials (com ENTER, Alt, Shift, etc.)

Quan un usuari prem una tecla normal, es produeixen tres esdeveniments seguits i en aquest ordre:

• onkeydown,
• onkeypress i
• onkeyup.

L'esdeveniment onkeydown es correspon amb el fet de prémer una tecla i no deixar-la anar; l'esdeveniment onkeypress és la pròpia pulsació de la tecla i l'esdeveniment onkeyup fa referència al fet de deixar anar una tecla que estava premuda.

La forma més senzilla d'obtenir la informació sobre la tecla que s'ha premut és mitjançant l'esdeveniment onkeypress. La informació que proporcionen els esdeveniments onkeydown i onkeyup es pot considerar com més tècnica, ja que retornen el codi intern de cada tecla i no el caràcter que s'ha premut.

A continuació s'inclou una llista amb totes les propietats diferents de tots els esdeveniments de teclat tant en Internet Explorer com en la resta de navegadors:

• Esdeveniment keydown:
  • Mateix comportament en tots els navegadors:
    • Propietat keyCode: codi intern de la tecla
    • Propietat charCode: no definit
• Esdeveniment keypress:
  • Internet Explorer:
    • Propietat keyCode: el codi del caràcter de la tecla que s'ha premut
    • Propietat charCode: no definit
  • Resta de navegadors:
  • Propietat keyCode: per a les tecles normals, no definit. Per a les tecles especials, el codi intern de la tecla.
  • Propietat charCode: per a les tecles normals, el codi del caràcter de la tecla que s'ha premut. Per a les tecles especials, 0.
• Esdeveniment keyup:
  • Mateix comportament en tots els navegadors:
    • Propietat keyCode: codi intern de la tecla
    • Propietat charCode: no definit

Per convertir el codi d'un caràcter (no confondre amb el codi intern) al caràcter que representa la tecla que s'ha premut, s'utilitza la funció String.fromCharCode().

Exercici Teclat

Crea un script que mostri per pantalla la següent informació cada vedada que es premi una tecla:

• Caràcter permut
• Tipus event (keydown, keypress, keyup)
• Propietat keycode
• Propietat charcode

informació sobre els esdeveniments de ratolí

La informació més rellevant sobre els esdeveniments relacionats amb el ratolí és la de les coordenades de la posició del punter del ratolí. Encara que l'origen de les coordenades sempre es troba en la cantonada superior esquerra, el punt que es pren com a referència de les coordenades pot variar.

D'aquesta forma, és possible obtenir la posició del ratolí respecte de la pantalla de l'ordinador, respecte de la finestra del navegador i respecte de la pròpia pàgina HTML (que s'utilitza quan l'usuari ha fet scroll sobre la pàgina). Les coordenades més senzilles són les que es refereixen a la posició del punter respecte de la finestra del navegador, que s'obtenen mitjançant les propietats clientX i clientY:

function muestraInformacion(elEvento) {
   var esdeveniment = elEvento || window.event;
   var coordenadaX = esdeveniment.clientX;
   var coordenadaY = esdeveniment.clientY;
   alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY);
}

document.onclick = muestraInformacion;

Les coordenades de la posició del punter del ratolí respecte de la pantalla completa de l'ordinador de l'usuari s'obtenen de la mateixa forma, mitjançant les propietats screenX i screenY:

var coordenadaX = esdeveniment.screenX;
var coordenadaY = esdeveniment.screenY;

En moltes ocasions, és necessari obtenir un altre parell de coordenades diferents: les que corresponen a la posició del ratolí respecte de l'origen de la pàgina. Aquestes coordenades no sempre coincideixen amb les coordenades respecte de l'origen de la finestra del navegador, ja que l'usuari pot fer scroll sobre la pàgina web. Internet Explorer no proporciona aquestes coordenades de forma directa, mentre que la resta de navegadors sí que ho fan. D'aquesta forma, és necessari detectar si el navegador és de tipus Internet Explorer i en cas afirmatiu realitzar un càlcul senzill:

// Detectar si el navegador és Internet Explorer
var ie = navigator.userAgent.toLowerCase().indexOf('msie')!=-1;

if(ie) {
     coordenadaX = esdeveniment.clientX + document.body.scrollLeft;
     coordenadaY = esdeveniment.clientY + document.body.scrollTop;
}
else {
     coordenadaX = esdeveniment.pageX;
     coordenadaY = esdeveniment.pageY;
}

alert("Has premut el ratolí en la posició: " + coordenadaX + ", " + coordenadaY + " respecte de la pàgina web");

La variable ie val true si el navegador en el qual s'executa el script és de tipus Internet Explorer (qualsevol versió) i val false en un altre cas. Per a la resta de navegadors, les coordenades respecte de l'origen de la pàgina s'obtenen mitjançant les propietats pageX i pageY. En el cas d'Internet Explorer, s'obtenen sumant la posició respecte de la finestra del navegador (clientX, clientY) i el desplaçament que ha sofert la pàgina (document.bodi.scrollLeft, document.bodi.scrollTop).

Exercicis

Ratolí i Teclat

a) Es vol que el ratolí, en qualsevol punt de la finestra del navegador, es mostri la posició del punter respecte del navegador i respecte de la pàgina.

b) Es vol que, a més a més, en prémer qualsevol tecla, el missatge mostrat ha de canviar per indicar el nou esdeveniment i la seva informació associada.

c)Afegir la següent característica al script: quan es prem un botó del ratolí, el color de fons del quadre de missatge ha de ser groc (#FFFFCC) i quan es prem una tecla, el color de fons ha de ser blau (#CCE6FF). En tornar a moure el ratolí, el color de fons torna a ser blanc.

Exercici4 Events

Posició ratolí

Crear un script que informi a l'usuari en què zona de la pantalla ha premut el ratolí. Les zones definides són les següents: esquerra a dalt, esquerra a baix, dreta a dalt i dreta a baix.

Exercici5 Events