[Résolu] Plusieurs événements et une seule fonction

Bonjour,

J'associe un événement à un clic de souris par l'intermédiaire de addEventListener sous la forme truc.addEventListener('click', ajout, true) où truc est un repéré par un identificateur. Pas de problème, la fonction ajout, qui permet d'afficher un objet dans un div marche bien.
Toutefois, j'aimerais paramétrer cette fonction ajout : par exemple si je clique sur truc1 j'affiche l'objet 1 et si je clique sur truc2 j'affiche l'objet 2 et ainsi de suite. (une vingtaine possible)
Comment réutiliser cette fonction ajout en fonction de la chose cliquée ?
Merci
PS. J'espère que le premier réveillon n'a pas été trop dur. Vivement le second !!
Modifié par coucou (26 Dec 2006 - 18:37)

J'ai résolu mon problème en utilisant

if (!e) var e = window.event;
	if (e.target)
		targ = e.target;
	else
		if (e.srcElement)
			targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;

du site
http://www.quirksmode.org/js/events_properties.html

puis en testant targ.innerHTML qui me donne le contenu de l'élément cliqué.

Salut,

Tu peux effectivement récupérer la cible ainsi mais rien ne t'empêche de passer celle-ci en argument de la fonction "ajout". Ainsi, tu peux passer n'importe quelle cible sans être obligé de mettre un identifiant.

exemple :

var oEl = document.getElementById("truc"),
    oEl2 = document.getElementsByTagName("p")[0],
    oEl3 = document.getElementById("othertruc");
oEl.addEventListener("click", function() { ajout(oEl); }, false);
oEl.addEventListener("click", function() { ajout(oEl2); }, false);
oEl.addEventListener("click", function() { ajout(oEl3); }, false);

J'ai mis false sur le 3ème paramètre parce que seuls les navigateurs comprenant cette méthode (addEventListener) sont capables d'être en mode capturant. D'une manière générale, c'est à éviter pour avoir une chance d'obtenir un comportement similaire sur les autres navigateurs (IE entre autres).
Pour prendre tout le monde en compte, je remplace addEventListener par cette fonction :

function fnConnect(oElem, sEvType, fn, bCapture)
{
    document.addEventListener ? [#blue]// W3C compliant[/#]
        oElem.addEventListener(sEvType, fn, bCapture):
        oElem.attachEvent ? [#blue]// IE[/#]
            oElem.attachEvent('on' + sEvType, fn):
            false; [#blue]// ou oElem['on' + sEvType] = fn; pour prendre en charge les anciens navigateurs (pas forcémment souhaitable)[/#]
}

ce qui, pour obtenir la même chose que le premier exemple, donnerait :

var oEl = document.getElementById("truc"),
    oEl2 = document.getElementsByTagName("p")[0],
    oEl3 = document.getElementById("othertruc");
fnConnect(oEl, "click", function() { ajout(oEl); }, false);
fnConnect(oEl, "click", function() { ajout(oEl2); }, false);
fnConnect(oEl, "click", function() { ajout(oEl3); }, false);

Modifié par koala64 (27 Dec 2006 - 21:22)