Impostare eventi per un tipo di tag

[fortenet]

Salve a tutti, vi faccio questa domanda poichè non so neanche come avrei potuto cercarla nel forum:
supponiamo che nella mia pagina html abbia una tabella e che tramite javascript gli inserisca delle nuove righe a mio comando; è possibile indicare da un js esterno qualcosa che assegni ad ogni td di quella tabella un determinato evento? per intenderci qualcosa simile come un css per javascript, ossia come nei css posso impostare il "color" per tutti i tags h1 ad esempio, posso fare la stessa cosa con javascript ma senza toccare il file html, o quantomeno inserendo in quest'ultimo ovviamente solo il riferimento al file esterno .js.

grazie e spero di non essere stato troppo vago.

[m4rko80]

Ciao, se non ho capito male vorresti che accadesse qualcosa ad un determinato tag in un certo momento o semplicemente che agisse come un foglio di stile(parlo del js).
Mi viede da pensare a jQuery. Permette di gestire molti eventi e modifiche con pochissimi passaggi.
http://api.jquery.com/category/events/
http://api.jquery.com/category/css/

Se non lo conosci dai un occhiata magari

[fortenet]

esatto, in pratica cercavo proprio questo, come l'esempio che hai riportato, simile all'esempio nella guida di questo sito

http://javascript.html.it/guide/lezi...re-gli-eventi/

dove assegna a tutti i tag "<a>" un alert sull'evento click.

Ti ringrazio tanto: ma che tu sappia, come è possibile farlo senza usare jquery, ossia facendo (credo) programmazione ad oggetti con javascript?

[m4rko80]

Guarda.. ti dirò... non sono espertissimo di javascript e quindi non conosco esattamenta tutta la sintassi per ogni cosa(a parte le piu comuni funzioni e sintassi usate). Per questo mi viene molto comodo jquery dato che non necessita questo sapere e la sua sintassi e' semplificata.
Ad ogni modo prova a cercare come individuare l'evento click con javascript classico, non credo sia così compliacato.

[kekino]

Originariamente inviato da fortenet
Salve a tutti, vi faccio questa domanda poichè non so neanche come avrei potuto cercarla nel forum:
supponiamo che nella mia pagina html abbia una tabella e che tramite javascript gli inserisca delle nuove righe a mio comando; è possibile indicare da un js esterno qualcosa che assegni ad ogni td di quella tabella un determinato evento? per intenderci qualcosa simile come un css per javascript, ossia come nei css posso impostare il "color" per tutti i tags h1 ad esempio, posso fare la stessa cosa con javascript ma senza toccare il file html, o quantomeno inserendo in quest'ultimo ovviamente solo il riferimento al file esterno .js.

grazie e spero di non essere stato troppo vago.

premettendo che javascript lo sto inizando ad usare da molto molto poco
se ho capito quello che vuoi fare.. penso basti usare document.getElementByTagName("td")

tipo document.getElementByTagName("td").style.color="re d"; per avere il testo colorato di rosso.. ecc. ecc.

edit: ah scusa.. non avevo visto sotto...
beh penso si possa fare anche quello che vuoi tu con getElementByTagName ...

tipo document.getElementByTagName("a").onclick=alert("h ai cliccato");

ma aspetta correzioni da qualcuno un pelo più esperto

[Xinod]

@ fortenet
in qualche modo si riesce a fare quello che chiedi senza librerie/framework

se si tratta di gestire eventi si puo' risolvere gestendo l' evento su di un elemento contenitore (a mali estremi il body) e sfruttando il bubbling degli eventi (se clicco su di un link prima o poi il click risale per via gerarchica fino al body)

parlo di "a mali estremi" nel caso del body perche' ovviamente piu' si circostanzia questa attivita' di osservazione e scrematura di eventi meglio e'

se non ci sono eventi coinvolti
o si rivaluta comunque la situazione ogni tot millisecondi
o si predispone in qualche modo che chi e' in grado di generare modifiche lanci anche una nuova valutazione una volta effettuata la modifica

[fortenet]

@m4rko80 grazie, vedo che gli altri mia hanno indicato qualche buona dritta.

@kekino effettivamente mi ero proprio dimenticato di un comando così semplice come geElementByTagName, grazie; chissà se scorrendo il document come oggetto si può arrivare a individuare una singola zona del DOM, ad esempio:

document.nome_div.nome_tabella.geElementByTagName( 'nome_td').onclick = function...

in questo modo dovrei applicare ai TD di quella tabella quel determinato evento: ma devo eseguire questo comando per ogni TR che inserisco in seguito (spero di essermi spiegato), oppure mi considera ogni TD di quella tabella, anche se creato successivamente alla creazione della pagina?

@Xinod grazie ma purtroppo non conosco il "bubbling degli eventi" e non sono in grado di gestire la cosa come me l'hai consigliata

[kekino]

Originariamente inviato da fortenet

@kekino effettivamente mi ero proprio dimenticato di un comando così semplice come geElementByTagName, grazie; chissà se scorrendo il document come oggetto si può arrivare a individuare una singola zona del DOM, ad esempio:

document.nome_div.nome_tabella.geElementByTagName( 'nome_td').onclick = function...

in questo modo dovrei applicare ai TD di quella tabella quel determinato evento: ma devo eseguire questo comando per ogni TR che inserisco in seguito (spero di essermi spiegato), oppure mi considera ogni TD di quella tabella, anche se creato successivamente alla creazione della pagina?

onestamente non saprei io penso che prenda tutti gli elementi con il tag che gli dici tu.. ma non sono sicuro, la mia era un'idea che mi era venuta, ma essendo molto nuovo in questo mondo non so se effettivamente funzioni

[Xinod]

Originariamente inviato da fortenet
@Xinod grazie ma purtroppo non conosco il "bubbling degli eventi" e non sono in grado di gestire la cosa come me l'hai consigliata

esempio

window.onload=function(){
	var t=document.getElementById('id_tabella');
	t.onclick=function(e){
		e=e||event;
		var src=e.target||e.srcElement;
		for(var el=src;el!=t;el=el.parentNode){
			if(el.tagName=='TD'){
				// da qui in poi el e' il td che (anche indirettamente) e' stato cliccato
				alert("sono un td, il mio contenuto e':\n"+el.innerHTML);
				break;
			}
		}
	}
}

ciao