11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Obtenir élément par Event

Bonjour à tous,

Je gère actuellement un JS permettant de transférer d'un tableau à l'autre des lignes ayant des evenements.
Pour cela, j'utilise cette fonction qui permet de générer une nouvelle ligne en lui attribuant des Event :

function GoDroite(){
	var liste = document.getElementById('listeGauche').getElementsByTagName('td');
	for(i = 0; i<liste.length; i++) {
		var elem = liste[\i];
		if(elem.className == 'beSlt')
		{
			var contenu = elem.innerHTML;
			var valeur = elem.id;
			alert(valeur);
			
			var nbrow = document.getElementById('listeDroite').getElementsByTagName('td').length;
			nbrow--;
			var newRow = document.getElementById('listeDroite').insertRow(nbrow); //On crée une nouvelle ligne
			newRow.className = 'lnStyle';
			
			var newCell = newRow.insertCell(0); //On crée la cellule
			newCell.innerHTML = contenu;
			newCell.id = valeur;
			newCell.className = 'noSlt';
			
			if(document.all){
			newCell.attachEvent("onmouseover", addClassOver);
			newCell.attachEvent("onmouseout", delClassOver);
			newCell.attachEvent("onmousedown", sltThisD);
			} else {
			newCell.addEventListener("mouseover", addClassOver, false);
			newCell.addEventListener("mouseout", delClassOver, false);
			newCell.addEventListener("onmousedown", sltThisD, false);
			}
			
			document.getElementById('listeGauche').deleteRow(i);
			i--;
		}
	}
}


Seulement j'aimerai attribuer une variable à chacun de ces 'event' par rapport à leurs 'id'. J'avais essayer de faire :
newCell.onmouseover = function(){addclassover(valeur_de_lid)};

à la place de :

newCell.attachEvent("onmouseover", addClassOver);
newCell.addEventListener("mouseover", addClassOver, false);

mais le 'for' fait que tous mes nouveaux éléments ont la même variable au final.

J'ai donc trouver un script permettant de récupérer un élément par rapport à son évènement, mais cela ne fonctionne pas sous FireFox, par exemple pour changer la class :
function addClassOver(event){
	var x = event || window.event;
	var elt = x.target || x.srcElement;
	if(elt.className == 'noSlt'){
		elt.className = 'noOverMouse';
	}
	else if(elt.className == 'beSlt'){
		elt.className = 'beOverMouse';
	}
}


Ma question est donc :
Auriez-vous une idée pour récupérer un évènement par l'Event (pour IE et FF) ?
Ou bien une solution pour appliquer des évènements avec une valeur générer dynamiquement ?

Merci d'avance.
Modifié par Zetura (25 Aug 2008 - 13:44)
J'aurais pas du tout fait comme ça, mais on va quand même essayer :
- garde à l'esprit que ta variable liste est un tableau, donc tu peux à l'aide de i rechercher le TD que tu veux modifier (d'ailleurs, à chaque fois dans la boucle tu affectes elem = liste, pourquoi ?).
function GoDroite()
{
	var liste = document.getElementById('listeGauche').getElementsByTagName('td');
	for(i = 0; i<liste.length; i++)
	{
		if(liste[i].className == 'beSlt')
		{
			var contenu = liste[i].innerHTML;
			var valeur = liste[i].id;

			var newRow = document.getElementById('listeDroite').insertRow(-1); //On crée une nouvelle ligne, le -1 signifie à la fin du tableau
			newRow.className = 'lnStyle';
			var newCell = newRow.insertCell(0); //On crée la cellule
			newCell.innerHTML = contenu;
			newCell.id = valeur;
			newCell.className = 'noSlt';
			if(document.all)
			{
				newCell.attachEvent("onmouseover", addClassOver);
				newCell.attachEvent("onmouseout", delClassOver);
				newCell.attachEvent("onmousedown", sltThisD);
			}
			else 
			{
				newCell.addEventListener("mouseover", addClassOver, false);
				newCell.addEventListener("mouseout", delClassOver, false);
				newCell.addEventListener("onmousedown", sltThisD, false);
			}
			document.getElementById('listeGauche').deleteRow(i);
			i--;
		}
	}
}
[/i][/i][/i]
Modifié par warry (22 Aug 2008 - 12:29)
Ce n'est pas elem = liste, c'est juste que le forum interprète mon [i\] comme du BBcode donc tu ne vois pas que c'est :

var elem = liste[i\]


Désolé, je peux pas faire mieux héhé Smiley langue
J'utilise donc bien ta technique pour rechercher mon td Smiley cligne
Modifié par Zetura (22 Aug 2008 - 13:48)
Personnellement j'aurais utilisé les prototypes, ou une "classe". Cela permet d'affecter des comportements et des variables à chacune de tes cellules :

Object.protoype.comportementPerso(valeur,contenu) // J'ai mis Object, parce que je crois que la fonction insertCell retourne un Object, fais un alert(newCell); pour en être sur
{
	this.id=valeur
	this.innerHTML=contenu;

	this.onmouseover = function()
	{
		addClassOver();
	}
	// ...
}

function GoDroite()
{
	var liste = document.getElementById('listeGauche').getElementsByTagName('td');
	for(i = 0; i<liste.length; i++)
	{
		if(liste[i].className == 'beSlt')
		{
			var contenu = liste[i].innerHTML;
			var valeur = liste[i].id;
			var newRow = document.getElementById('listeDroite').insertRow(-1); //On crée une nouvelle ligne, le -1 signifie à la fin du tableau
			newRow.className = 'lnStyle';
			var newCell = newRow.insertCell(0); //On crée la cellule
			newCell.innerHTML = contenu;
			newCell.comportementPerso(valeur,contenu);
			document.getElementById('listeGauche').deleteRow(i);
			i--;
		}
	}
}


J'ai pas testé, et je suis un peu rouillé Smiley lol [/i][/i][/i]
Modifié par warry (22 Aug 2008 - 14:25)
Peut-être, mais ça me donne toujours pas de réponse pour mettre une variable dans ma fonction 'addClassOver'.

Ça simplifie juste un peu mon code mais m'oblige à utiliser un framework, ce que je cherche à éviter ^^
Zetura a écrit :
Peut-être, mais ça me donne toujours pas de réponse pour mettre une variable dans ma fonction 'addClassOver'.

Ça simplifie juste un peu mon code mais m'oblige à utiliser un framework, ce que je cherche à éviter ^^

Non pas de framework, dans le prototype, pour récupérer l'id tu mets this.id
Pour récuperer le this.id tu peux soit utliser les évenement type DOM 1, comme l'exemple de warry :

objet.onmouseover = function(){
   addClassOver(this.id);
}
function addClassOver(var){
   alert(var)
};


Si tu veux utliser les evenement type DOM2 il faut utiliser un fonction addEvent qui 'émule' le this.
Modifié par matmat (22 Aug 2008 - 19:27)
matmat a écrit :
Pour récuperer le this.id tu peux soit utliser les évenement type DOM 1, comme l'exemple de warry :

objet.onmouseover = function(){
   addClassOver(this.id);
}
function addClassOver(var){
   alert(var)
};


Si tu veux utliser les evenement type DOM2 il faut utiliser un fonction addEvent qui 'émule' le this.


Le problème c'est que j'ai essayé avec le type DOM 1, mais le fait que ça soit dans une boucle fait buger.

Même si l'alert m'enverra une valeur différente à chaque fois; sur la page, les fonction addClassOver() générées auront toutes la même valeur. C'est vraiment bizarre je sais xD

Par exemple :


for(i=0; i<=4; i++){
alert(i);
objet.onmouseover = function(){ addClassOver(i); }
};

Renverra en popup 1, 2, 3 et 4, mais sur mes objets de la page, ils auront tous la fonction onmouseover='addClassOver(4);' avec la même valeur et non 4 valeurs différentes.
Finalement, je passe ma variable en id de l'objet et j'utilise this.id.

Merci pour votre aide.
Sujet clos
Aller à