Newsgroup: it.comp.lang.javascript
Titolo: [DOM] gestire gli eventi

ciao
sto documentandomi sulla gestione degli eventi nel modello DOM per risolvere
un problema:
Ho una pagina HTML con dei DIV, generati dinamicamente:
<!--
<div id="lay1">testo1</div>
<div id="lay2">testo2</div>
<div id="lay3">testo3</div>
<div id="lay4">testo4</div>
<div id="lay5">testo5</div>
.....
<div id="dett"></div>
-->
cliccando su uno dei DIV 'lay(n)' il testo ivi contenuto dovra' essere
assegnato al DIV 'dett'...
una strada possibile e':
<!--
<div id="lay1" onclick="fnAS(lay1)">testo1</div>
....
/*
fnAS(nLay){
document.getElementById('dett').innerHTML =
document.getElementById(nLay).innerHTML ;
}
*/
-->
mi piacerebbe pero' isolare il piu' possibile l'HTML dallo script... ovvereo
attribuire l'evento non al tag ma all'oggetto DOM:
/*
tLay = document.getElementByTagName('div').item(0).length;
for(a=0;a<tLay;a++ ){
document.getElementByTagName('div').item(a).onclick = fnAS2(a);
fnAS(a){
document.getElementById('dett').innerHTML =
document.getElementByTagName('div').item(a).innerHTML ;
}
}
*/
non so se abbia molto senso mettere un gestore di eventi dentro un ciclo...
comunque, quello che vorrei sapere e' se la sintassi
//document.getElementByTagName('div').item(0).onclick
sia corretta... dalla documentazione trovata in rete finora, pare che questo
tipo di gestione degli eventi funzioni solo con oggetti FORM... e' possibile
utilizzarla per qualsiasi oggetto DOM?
se provo:
// document.getElementByTagName('div').item(0).onclick = document.write
("ciao");
la scritta "ciao" appare al'apertura della pagina, e non quando clicco sopra
il primo oggetto DIV...
e' un problema di sintassi o non e' proprio possibile attribuire un evento
in questo modo?
Grazie a tutti coloro che mi risponderanno.
ciao
=)
marcello
--------------------------------
Inviato via 
http://usenet.libero.it

sempre io...
/*
Carta = document.getElementsByTagName('div');
nCarta = Carta.length;
for(a=0; a < nCarta; a++){
Carta.item(a).attachEvent("onmouseover", ghh);
function ghh(){
document.getElementById('dett').innerHTML = Carta.item(a).innerHTML;
}
}
*/
sono riuscito ad attribuire l'evento all'oggetto DOM... solo mi da un errore
all'interno della funzione "necessario oggetto"...
in questo modo funziona:
//document.getElementById('dett').innerHTML = Carta.item(0).innerHTML;
solo che l'indice di "item" in questo modo e' statico... come devo fare per
passargli l'indice "a"????
ciao



come dico spesso [ahime']
non so se ho capito 
un modellino potrebeb essere questo?
<HTML>
<HEAD>
<TITLE> intendevi questo? </TITLE>
</HEAD>
<BODY>
<div id="lay1">testo1</div>
<div id="lay2">testo2</div>
<div id="lay3">testo3</div>
<div id="lay4">testo4</div>
<div id="lay5">testo5</div>
<div id="dett">qui compare</div>
<script language="javascript">
tLay = document.getElementsByTagName('div')
for(a=0;a<tLay.length;a++ ){
if (tLay[a].id.indexOf('lay')!=-1)/*esclude l' associazione di evento
per i layer che non hanno un dato id*/
{document.getElementsByTagName('div').item(a).onclick = fnAS2;}}
function fnAS2(){
document.getElementById('dett').innerHTML =this.innerHTML ;
}</script>
</BODY>
</HTML>

Grazie! funziona perfettamente...
approfitto della tua disponibilita'... =)
/*
Carta = document.getElementsByTagName('div');
nCarta = Carta.length;
for(a=0; a < nCarta; a++){
Carta.item(a).attachEvent("onmouseover", this.SHOWdet);
Carta.item(a).attachEvent("onmouseout", HIDEdet);
function SHOWdet(){
//se metto "this", giustamente gli assegno l'oggetto con tutto il metodo...
document.getElementById('dett').innerHTML = this.innerHTML;
//se metto l'indice, giustamente non trova l'oggetto (in quanto 'a' e' un
array...)
document.getElementById('dett').innerHTML =Carta.item(a).innerHTML;
}
function HIDEdet(){
document.getElementById('dett').innerHTML = '';
}
}
*/
come dovrei fare a passargli il valore corrente di 'a'? ci sara' un
modo?????
gracias ancora per il codice



sai che non ho ben capito?
di per se' mi pare che il mio script risolverebbe di per se' il
quesito
ho come l 'impressione che non mi abbia detto tutto tutto quel che ti
serve...
ma puo' esser che il difetto sia nel manico... [io me medesimo]
anzi lo do per scontato
comunque...
passare in modo stretto no direi
pero' possiamo costruire i dati in modo che ci facciano fare un passo
in avanti 
 provo a vedere un passetto in piu'
poi mi dici se ti serve
Creando un oggetto nulla vieta di aggiungerci un pezzettino di nostro
gradimento.
supponiamo
che tu debba fare riferimento a un array pluto
slegato dal contenuto dei div cliccati ma per il quale ci possa essere
una correlazione diretta 
per esempio la lunghezza di pluto sia uguale alla lunghezza dei div
lay(s), fatto questo che ci permette di considerare significativo l'
indice comune all' interno della rispettiva array o collection
pluto=new Array()
pluto[0]='mamma mia che impressione'
pluto[1]='se fossi furbo governerei lo mondo'
pluto[2]='se mi dicessero tutto faremmo prima ;) smiley'
pluto[3]='se non ho capito mannaia o putipu'
pluto[4]='mi fai un esempio effettivo'
e presumiamo [costruiamo i dati in modo ] che la lunghezza dell' array
pluto sia uguale a quella della collezione di div che ci interessa
lo script che associa l' evento (o gli eventi)
aggiunge anche una proprieta' aggiungiva diretta
indice_che_mi_serve
 per brevita' icms
document.getElementsByTagName('div').item(a).icms=a
che potremo utilizzare per individuare l' elemento di pluto che mi
interessa
tutto insieme
<HTML>
<HEAD>
<TITLE> intendevi questo? </TITLE>
</HEAD>
<BODY>
<div id="lay1">testo1</div>
<div id="lay2">testo2</div>
<div id="lay3">testo3</div>
<div id="lay4">testo4</div>
<div id="lay5">testo5</div>
<div id="dett">qui compare</div>
<script language="javascript">
pluto=new Array()
pluto[0]='mamma mia che impressione'
pluto[1]='se fossi furbo governerei lo mondo'
pluto[2]='se mi dicessero tutto faremmo prima ;) smiley'
pluto[3]='se non ho capito mannaia o putipu'
pluto[4]='mi fai un esempio effettivo'
tLay = document.getElementsByTagName('div')
for(a=0;a<tLay.length;a++ ){
if (tLay[a].id.indexOf('lay')!=-1)/*esclude l' associazione di evento
per i layer che non hanno un dato id*/
{
document.getElementsByTagName('div').item(a).onclick = fnAS2;
document.getElementsByTagName('div').item(a).icms=a}
}
function fnAS2(){
document.getElementById('dett').innerHTML =pluto[this.icms] ;
}</script>
</BODY>
</HTML>
ahem non serve?

 }
Non mettere la funzione nel ciclo, sarebbe come istanziarla ogni volta.
Quando assegni un gestore di eventi, dai semplicemente una referenza 
alla funzione.
L'errore ti viene, perche' tu all'interno della funzione richiami una 
variabile "a" (che e' usata esternamente nel ciclo) che non esiste.
Cercando di esser piu' chiari, quando tu applichi una funzione ad un 
evento, dici semplicemente "ehy, allo scatenarsi di questo evento, 
eseguimi questa funzione".
Questo significa che la funzione non viene eseguita, ne' considerata, 
fintanto che l'evento non viene scatenato.
Ergo, la variabile "a", nel contesto, non esiste.
E' concettualmente sbagliato avere un approccio del genere. Tu a tutti 
gli oggetti, assegni la solita funzione.. Quindi non puoi discriminare 
che innerHTML utilizzare in questo modo.
In oltre, cosi' tu associ l'evento onmouseover a TUTTI i div presenti in 
quella pagina.. TUTTI.
Senza considerare che ti devi ricordare di fare questo tipo di codice 
solo all'onload della pagina, non prima.
Posso capire che sia un discorso di "isolamento del codice" (se usi solo 
IE ti conviene usare i behavior), ma ciclarsi tutti i div presenti nella 
pagina forse non e' la cosa migliore da farsi.. in ogni caso, escludi i 
browser che non siano di 5th generazione.
In ogni caso, la funzione che cerchi (per i browser che supportano 
attachEvent e addEventListener):
	<script>
		function addEvent(obj, sEvt, hFun){
			if (typeof(obj.attachEvent)!="undefined")
				obj.attachEvent("on"+sEvt,hFun);
			else if (typeof(obj.addEventListener)!="undefined")
				obj.addEventListener(sEvt,hFun,true);
		}
 
		function myf(e){
			var obj=e.srcElement||e.target||null;
 
			if (obj!=null){
				document.getElementById
("out").innerHTML=obj.nodeValue||obj.innerHTML||"";
			}
		}
 
		onload=function(){
			cDiv=document.getElementsByTagName("DIV");
 
			for (var i=0;i<cDiv.length;i++)
				addEvent(cDiv[i],"mouseover",myf);
		}
	</script>
-- 
C'ya,
ZER0
  :. job profile - coder.gfxer.webDesigner
"Quanti angeli danzano sulla punta di uno spillo?"

ciao
Ho da poco scoperto le delizie del modello di eventi DOM, specialmente i
metodi "getElementBy...", che mi permettono di evitare gli array, sto
lavorando ad un classico scriptino "swapimage" o rollover... il tuo codice
va benissimo!!!
ciao e ancora grazie


 "Quanti angeli danzano sulla punta di uno spillo?"
--------------------------------
Inviato via 
http://usenet.libero.it