Newsgroup: it.comp.lang.javascript
Titolo: addEventListener VS. setAttribute

Scusa la domanda banale... ma che differenza c'è fra
document.getElementById("BUTTON1").addEventListener("click",allerta1,true)
e
document.getElementById("BUTTON1").setAttribute("onClick","allerta1");
Ciao,
--Gabriele

Nessuno sa aiutarmi? :-(
O non rispondete perché forse la domanda è [OT]... se lo fosse scusate...
Ciao,
--Gabriele


 --Gabriele
Ciao

> Io lo farei volentieri!?! Ma non ne ho la piu' pallida idea :(
E se ti dico che in un modo mi funziona e nell'altro no.... peggio ancora
non mi funziona nel modo che pensavo fosse quello corretto
(addEventListener) mentre funziona in quello che ho provato come ultima
spiaggia, per la disperazione... (setAttribute...)
--Gabriele

 spiaggia, per la disperazione... (setAttribute...)
document.getElementById("mybutton").addEventListener("click",function()
{alert("click it");},true);
funzia che e' una meraviglia. 
Puo' darsi che il tuo errore sia altrove..?
-- 
C'ya,
ZER0
  :. job profile - coder.gfxer.webDesigner
"when you eliminate the impossible, whatever remains, however 
improbable, must be the truth" (S.H.)

, 
gabriele....@libero.it
 says...

In uno associ direttamente all'event-handler il riferimento diretto alla 
funzione, nel secondo setti un attributo al tag, che dovra' poi essere 
"riparserizzato" internamente per dare all'oggetto l'associazione alla 
funzione.
E dimenticandoci del terzo parametro, ovviamente.



Con addEventListener stai usando il modo di gestire gli eventi secondo 
il DOM 2 Events W3C:
http://www.w3.org/TR/DOM-Level-2-Events/events.html
Con il DOM Events hai maggiori potenzialità nel gestire gli eventi, come 
ad esempio di gestire le fasi di "event capture" e "event bubbling". 
Inoltre sullo stesso oggetto puoi aggiungere più di un event listener e 
successivamente rimuoverne uno o più.
addEventListener è supportato da Mozilla/Netscape 6+ ma purtroppo non da 
Internet Explorer che usa un'altro metodo, attachEvent. Con attachEvent 
non è possibile gestire la fase di capture e c'è un buco nella 
specifica. Ovvero: quando gestisci un evento non sai qual'è il target 
corrente dell'evento. Per spiegermi meglio: se  aggiungi un evento ad 
una tabella, ad esempio onclick, e fai clic sulla tabella, come target 
non viene restituita la tabella bensì il testo sul quale hai fatto clic!!
Con addEventListener invece avresti event.target e event.currentTarget 
che rappresentarebbero rispettivamente il target su cui hai fatto clic 
(il testo della cella) e il target corrente sul quale hai fatto 
addEventListener (ovvero la tabella).
Due articoli veramente interessanti sui vari modi di gestire gli eventi 
li puoi trovare qui:
http://javascriptkit.com/dhtmltutors/domevent1.shtml
http://javascriptkit.com/dhtmltutors/domeventp2-1.shtml
Inoltre qui hai un cross-reference sui quali browser supportano i vari 
metodi e proprietà riguardanti il DOM Events:
http://www.xs4all.nl/~ppk/js/w3c_events.html
Gaetano Bigliardi

 Puo' darsi che il tuo errore sia altrove..?
forse...
avevo provato cosě (riprendo il tuo esempio)
function pippo() {
alert("click it");
}
document.getElementById("mybutton").addEventListener("click",pippo(),true);
--Gabriele

 document.getElementById("mybutton").addEventListener("click",pippo(),true);
Scrivendo in questo modo stai cercando di aggiungere all'oggetto quello 
che ti restituisce la funzione pippo. Devi scriverlo senza parentesi:
document.getElementById("mybutton").addEventListener("click", pippo, true);
Attenzione poi: addEventListener non funziona con Internet Explorer. Il 
metodo migliore e più portabile è quello classico:
document.getElementById("mybotton").onclick = pippo;
In entrambi i casi pippo deve essere una fuzione che hai dichiarato, 
oppure è necessario utilizzare il modo che ti ha indicato Zero, ovvero 
creare una funzione anonima inline.
Gaetano Bigliardi

 funzione.
che intendi con riparserizzato? Che in qualche caso non è detto che il
variare dell'attributo non concide con l'effettivo adeguamento dell event
handler?
--Gabriele

 handler?
Appunto, il browser deve riparserizzarlo, fare un passaggio in piu' per 
cosi' dire.
Guarda la risposta di Gaetano, cmq, che in merito e' molto esaustiva. 
Uno dei vantaggi indiscussi dell'addEventListener (o attachEvent) e' 
difatti quello di "accodare" le funzioni nell'event-handler. In questo 
modo eviti di "sovrascrivere".


 document.getElementById("mybotton").onclick = pippo;
Gia', ma ti "freghi" i vantaggi dell'addEventListener/attachEvent che 
dir si voglia.. a questo punto e' preferibile fare una "API" di 
framework che gestisca internamente la cosa, magari anche per NS4.x (se 
si vuol proprio esagerare).


 document.getElementById("mybutton").addEventListener("click",pippo(),true);
Cosi', come ti ha scritto anche Gaetano, non funziona di certo. Eppure 
nel tuo primo esempio non avevi fatto questo tipo di errore (mi 
riferisco, all'allerta1 senza parentesi).


 standard del W3C che Mozilla ha seguito.
Che memoria ZERO.... wow :-) rimango sbalordito :-O
Sei una sorta di "grande fratello"? :-)
--Gabriele

 riferisco, all'allerta1 senza parentesi).
Infatti ero convinto che mettere o non mettere le parentesi fosse
opzionele... ma l'indicazione di Gaetano mi ha "illuminato" e ho risolto in
un sol colpo un altro paio di problemi.
Infatti prendiamo questo esempio di  codice:
function gabriele() {
    function gab1 () {   return "gabriele";   }
alert(gab1);
}
Non riuscivo a capire perché sull'alert mi facesse vedere il codice della
function gab1 invece del il valore restituito da gab1() ... ma poi è
arrivata la dritta giusta e con le parentesi ...magicamente ... ecco il
risultato corretto.
function gabriele() {
    function gab1 () {   return "gabriele";   }
alert(gab1());
}
--Gabriele

 modo eviti di "sovrascrivere".
Infatti, con il setAttribute per accodare mi ero inventato di recuperare il
valore dell'attributo onclick,  accodarci la chiamata alla funzione e
ricaricare l'attributo completo (funzioni separati da ;).
--Gabriele

 ricaricare l'attributo completo (funzioni separati da ;).
Tu pensa che all'epoca, per far funzionare la gestione degli eventi per 
DHTML in modo uniforme sui vari browser, mi son dovuto fare un popo' di 
gestione cross-browsing tutta da me.. ah, bei tempi.. ;_;


 }
Se vuoi ti spiego l'arcano. In JS tutto e' una variabile (e si potrebbe 
dire che in JS tutte le variabili alla fine si riferiscono ad oggetti). 
Anche le funzioni, in realta', sono associate ad una variabile. Ad 
esempio, tu sei solito definire una funzione in questo modo:
function gabriele(){
	return "gabriele";
}
ma potresti benissimo fare:
var gabriele=function(){
	return "gabriele";
}
oppure:
var gabriele = new Function("return 'gabriele'");
Tutte e tre le sintassi sono equivalenti, e puoi usare su gabriele le 
stesse procedure che useresti anche su altre variabili "classiche" per 
cosi' dire.
Ora: Cosa succede quando tu cerchi di chiamare una funzione senza le 
parentesi? Nel maggiore dei casi, invochi il toString(), che e' un 
metodo che hanno praticamente tutti gli oggetti (compreso l'oggetto 
function) in JS.. E' piu' corretto forse dire che, nel momento in cui 
tenti di visualizzare direttamente un oggetto, JS chiama implicitamente 
il metodo toString().
Se tu provi infatti a fare:
alert(gabriele)
L'interprete JS non esegue - giustamente - la funzione gabriele ma 
chiama il metodo toString() di quell'oggetto. E per default, il metodo 
toString delle funzioni, e' quello di mostrarne il contenuto.
Ma - e qui sta il bello - essendo un metodo puo' esser ridefinito. Ad 
esempio, potresti voler far questo:
gabriele.toString=function(){return "function gabriele(){\n    [gabSys 
native code]\n}"}
e adesso prova a fare
alert(gabriele);
:)


 ingannato, infingardo! ;)
Spero di non averti deluso :-)