createElement e onClick

Salve,
premetto che ho cercato nel ng qualche vecchio post, ma non mi soddisfa ciò che
ho letto.

Riassumo:
sto tentando di creare degli <a> tramite createElement.
Quello che vorrei sarebbe crearlo in modo fosse equivalente a

<a href="" onClick="alert('ciao')">dimmi ciao</a>

ciò che ho scritto è

var theA;
theA=document.createElement("A");
theA.href="#";


var theText;
theText=document.createTextNode("dimmi ciao");
theA.appendChild(theText);

document.body.appendChild(theA);

Per aggiungere l'evento ho provato

theA.onClick="alert('ciao');";

ma ovviamente non funge, quindi ho tentato

theA.addEventListener("click", prova, false);

dove "prova" è una mia function.

Questo ovviamente
1) Mi funziona solo in FF (almeno IE mi dice "Proprietà o metodo non supportati
dall'oggetto")
2) Non capisco come passare dei parametri alla function (se li metto
direttamente nell' addEventListener, mi viene eseguito immediatamente
sull'onLoad e non più sul click)
3) Potrei provare con una createAttribute/setAttribute, ma non vorrei che ciò
non fosse supportato da alcuni browser (non ho provato questa strada)

Mi sapete dare delucidazioni? Vorrei evitare quanto più possibile di dover
testare quale browser sto usando a runtime...

TIA

In data Fri, 04 Feb 2005 12:06:22 +0100, Francesco N. Vespucci ha scritto:

Salve,
premetto che ho cercato nel ng qualche vecchio post, ma non mi soddisfa ciò che
ho letto.
Premessa: vado a logica, non ho testato quanto sotto

Per aggiungere l'evento ho provato

theA.onClick="alert('ciao');";
Strano, perché non dovrebbe funzionare?

Io tenterei in cascata:
a) onclick minuscola
b) provare con un setTimeout (magari vuole respiro per "aggiungerlo" al
DOM?)

3) Potrei provare con una createAttribute/setAttribute, ma non vorrei che ciò
non fosse supportato da alcuni browser (non ho provato questa strada)
Evita (vedi mio messaggio "STUDI[...]" 2 messaggi sopra questo,

setAttribute non va con IE ed eventi, tutto ok con Mozilla)

--
"E' l' ignoranza che crea l'intolleranza
di gente cieca e senza coscienza"
S.S.S.

Cristiano Larghi wrote:

Per aggiungere l'evento ho provato

theA.onClick="alert('ciao');";

Strano, perché non dovrebbe funzionare?
Io tenterei in cascata:
a) onclick minuscola
b) provare con un setTimeout (magari vuole respiro per "aggiungerlo" al
DOM?)

Allora, un problema era sicuramente il case (chiedo venia).
Il codice è mutato così

var theA;
theA=document.createElement("a");
theA.href="#";

Ora ho testato tre o quattro possibilità
theA.onclick="alert('ciao');";
//Niente da fare, ma nel DOM inspector compare tra le proprietà

theA.onclick=prova;
//prova è una funzione con parametro che fa l'alert del parametro, e qui l'alert
mi da [object Event] o undefined (rispettivamente FF e IE)

theA.onclick=prova('ciao');
//con la stessa funzione, viene eseguita sull'onload della pagina e poi non più
sul click

theA.onclick=function() { alert(testo); }
//funge solo se testo è una var globale

A questo punto non so come procedere!
La situazione reale è che ho una funzione ben definita, con parametri, e deve
essere richiamata sull'onclick del <a>, quindi nessuna delle strade su indicate
mi serve.
La stessa situazione deve essere replicata anche per altri tag img.

Sto provando questa strada come alternativa a document.write o innerHTML, ma sto
quasi per abbandonare...

Qualche altro suggerimento? Dove e come esattamente potrei provare a usare
settimeout?

PS Il risultato con document.write è questo (abbastanza grezzo, ma soddisfacente
dal lato dell'utilizzo di OO)
http://www.sit-puglia.it/fnv/webmapobj/index.htm

Cristiano Larghi wrote:

Per aggiungere l'evento ho provato

theA.onClick="alert('ciao');";

Strano, perché non dovrebbe funzionare?
Io tenterei in cascata:
a) onclick minuscola
b) provare con un setTimeout (magari vuole respiro per "aggiungerlo" al
DOM?)

Allora, un problema era sicuramente il case (chiedo venia).
Il codice è mutato così

var theA;
theA=document.createElement("a");
theA.href="#";

Ora ho testato tre o quattro possibilità
theA.onclick="alert('ciao');";
//Niente da fare, ma nel DOM inspector compare tra le proprietà

theA.onclick=prova;
//prova è una funzione con parametro che fa l'alert del parametro, e qui l'alert
mi da [object Event] o undefined (rispettivamente FF e IE)

theA.onclick=prova('ciao');
//con la stessa funzione, viene eseguita sull'onload della pagina e poi non più
sul click

theA.onclick=function() { alert(testo); }
//funge solo se testo è una var globale

A questo punto non so come procedere!
La situazione reale è che ho una funzione ben definita, con parametri, e deve
essere richiamata sull'onclick del <a>, quindi nessuna delle strade su indicate
mi serve.
La stessa situazione deve essere replicata anche per altri tag img.

Sto provando questa strada come alternativa a document.write o innerHTML, ma sto
quasi per abbandonare...

Qualche altro suggerimento? Dove e come esattamente potrei provare a usare
settimeout?

PS Il risultato con document.write è questo (abbastanza grezzo, ma soddisfacente
dal lato dell'utilizzo di OO)
http://www.sit-puglia.it/fnv/webmapobj/index.htm

On Fri, 04 Feb 2005 12:06:22 +0100, Francesco N. Vespucci wrote:

Ci sono cascato anch'io la prima volta:
onclick non onClick
Ciò che ha fregato me quella volta è stato che nella maggior parte delle
guide HTML l'evento associato al tag è indicato come onClick. Non è la
stessa cosa in javascript. Gli eventi sono tutti minuscoli, sempre. In
fondo non sono gli unici attributi che cambiano da HTML a javascript,
pensa a class che in javascript per ovvie ragioni è className.

Tra l'altro l'assegnazione di una funzione al
membro onclick è il metodo che ti assicura la massima portabilità (oggi
come oggi).

Ciao.
-Ema-

On Fri, 04 Feb 2005 12:06:22 +0100, Francesco N. Vespucci wrote:

sto tentando di creare degli <a> tramite createElement.
Quello che vorrei sarebbe crearlo in modo fosse equivalente a

<a href="#" onClick="alert('ciao')">dimmi ciao</a

ciò che ho scritto è

[cut]

Rimaneggiando il tuo codice, l'equivalente via DOM API del link sovrastante
e':

var theA=document.createElement("A");
theA.href="#";
theA.onclick=function(){alert('ciao')};
theA.appendChild(document.createTextNode("dimmi ciao");

document.body.appendChild(theA);

theA.onClick="alert('ciao');";

gli event-handler sono tutti minuscoli, sia in js sia come attributo di tag
(anche se come attributo te la fa ugualmente passare, la cosa).

theA.addEventListener("click", prova, false);

addEventListener, che e' uno standard w3c, non e' purtroppo supportato da
IE (quest'ultimo ha "attachEvent" )

2) Non capisco come passare dei parametri alla function (se li metto
direttamente nell' addEventListener, mi viene eseguito immediatamente
sull'onLoad e non più sul click)

Esatto. Quando imposti un listener devi passare il *riferimento* alla
funzione. Se fai:

theA.addEventListener("click", prova("qualcosa"), false);

gli stai dicendo di eseguire la funzione "prova" e assegnare come
riferimento il valore di ritorno.

Mi sapete dare delucidazioni? Vorrei evitare quanto più possibile di dover
testare quale browser sto usando a runtime...

La pratica del browser sniffing dovrebbe rimanere laddove si trova, nella
"storia" dello sviluppo web; al suo posto va usato l'object checking.

--
ZER0://coder.gfxer.web-designer/

~ Il computer e' una macchina progettata per velocizzare e automatizzare
gli errori.

on air ~ "Gianluca Grignani - Che ne sarà di noi"

In data Fri, 04 Feb 2005 13:06:29 +0100, Francesco N. Vespucci ha scritto:

Ora ho testato tre o quattro possibilità
theA.onclick="alert('ciao');";
Boh, per me questa sopra dovrebbe funzionare...ieri lo ho testato ma senza

creare prima l'oggetto. Però, adesso che mi ci fai pensare, IE ha qualche
problema con createElement...giusto per prova, prova a creare l'intero
elemento (createElement("<a href='....'>") e a vedere se così con IE va.

Qualche altro suggerimento? Dove e come esattamente potrei provare a usare
settimeout?
come sopra, ma con un setTimeout, del tipo

setTimeout("theA.onclick=\"alert('ciao');\"",1000) ;
(theA deve essere dichiarata globale, altrimenti dovrai sostituirla con
document.getElementById('idtuoanchor'))
Solo supposizioni, come ti dicevo non ci ha [quasi] mai messo mano...

--
"That until there is no longer first class
And second class citizens of any nation
Until the colour of a man's skin
Is of no more significance than the colour of his eyes
Me say war"

B.M.

On Fri, 4 Feb 2005 13:36:34 +0100, Cristiano Larghi wrote:

In data Fri, 04 Feb 2005 13:06:29 +0100, Francesco N. Vespucci ha scritto:

Ora ho testato tre o quattro possibilità
theA.onclick="alert('ciao');";
Boh, per me questa sopra dovrebbe funzionare...ieri lo ho testato ma senza
creare prima l'oggetto.

Guarda che ti stai confondendo. Qui non stai assegnando un attributo, ma
stai impostando direttamente l'event-handler. Quindi devi passargli un
riferimento a funzione, non una stringa.

on air ~ "Gianluca Grignani - Che ne sarà di noi"

In data Fri, 4 Feb 2005 13:40:13 +0100, ZER0 ha scritto:

Guarda che ti stai confondendo. Qui non stai assegnando un attributo, ma
stai impostando direttamente l'event-handler. Quindi devi passargli un
riferimento a funzione, non una stringa.
Sono quasi certo (ma ho purtroppo il sorgente a casa) che così funziona

(IE6-mozillanonsocheversione), su oggetti già presenti nella pagina al
momento del caricamento.
Nei miei test, dopo aver constatato che IE non funzionava con setAttribute
e onclick, ero passato per eventi a questa sintassi.
Quasi certo=99% perché ho fatto 2000 test ieri e magari potrei ricordare
male.

--
"Emancipate yourselves from mental slavery;
None but ourselves can free our minds"
B.M.

Francesco N. Vespucci wrote:

Per aggiungere l'evento ho provato

theA.onClick="alert('ciao');";

ma ovviamente non funge, quindi ho tentato

theA.addEventListener("click", prova, false);

dove "prova" è una mia function.

Questo ovviamente
1) Mi funziona solo in FF (almeno IE mi dice "Proprietà o metodo non
supportati dall'oggetto")

if (theA.addEventListener)
theA.addEventListener("click", prova, false);

else if (theA.attachEvent)
theA.attachEvent("onclick", prova);

Ma se non c'è un motivo particolare, io userei theA.onclick = ...

2) Non capisco come passare dei parametri alla function (se li metto
direttamente nell' addEventListener, mi viene eseguito immediatamente
sull'onLoad e non più sul click)

puoi fare così:

function prova(par1, par2) { ... }

var par1 = "ciao";
var par2 = "salve";
elem.onclick = = new Function(par1, par2, "prova(par1, par2);");

3) Potrei provare con una createAttribute/setAttribute, ma non vorrei
che ciò non fosse supportato da alcuni browser (non ho provato questa
strada)

Se non c'è un motivo particolare sarebbe preferibile utilizzare
direttamente l'impostazione diretta della proprietà. "setAttribute"
diventa necessario quando si usa un linguaggio diverso, tipo Java,
dove questo metodo di impostare al volo le proprità di un oggetto
non è applicabile.


Gaetano