11548 sujets

JavaScript, DOM et API Web HTML5

AddEventListener

Bonsoir
J'ai une liste définit par <ul id="monUl">. Chaque élément est du type
<li><a href="#" id="href1">Mon lien</a></li>

Dans mon script, je veux attribuer l'événement clic sur chacun des liens. Au
clic, une sous-liste s'affiche, et à chaque élément de la sous-liste est lié l'événement clic également.
Voilà mon problème
J"écris

//mn est la liste ul
                var as=mn.getElementsByTagName('a');
		for (i=0; i < as.length;i++){
			as[i].addEventListener("click",cliquer, false);
			}

la fonction cliquer fait appel à une fonction modif(i) qui permet d'afficher la bonne sous liste. Mais je n'arrive pas à passer i en paramètre à la fonction cliquer. La fonction modif ne s'exécute alors que pour la valeur de i = as.length.

Si j'écris


		for (i=0; i < as.length;i++){
			as[i].addEventListener("click",function(){modif(i);e.stopPropagation();}, false);

la console d'erreur me dit à juste titre que l'élément e n'est pas connu.

Comment résoudre ce problème ?

Merci par avance[/i][/i]
Salut,


for (i=0; i < as.length;i++){
		as[ i ].addEventListener("click",function([#red]e[/#]){modif(i);e.stopPropagation();}, false);
}


devrait mieux fonctionner
Modifié par skywalk3r (13 Feb 2008 - 09:26)
Modérateur
Salut,

Un petit rappel : addEventListener ne fonctionne pas sur IE.

La fonction suivante permet donc de prendre ce navigateur en charge :
function connect() {
	var a = arguments;
	return document.addEventListener ?
			a[0].addEventListener(a[1], a[2], a[3] || false):
			a[0].attachEvent ?
				a[0].attachEvent('on' + a[1], a[2]):
				false;
}

connect(oEl, 'click', function(e) { ... });
Bonjour
Merci beaucoup pour vos deux réponses
Celle de skywalk3r est excellente et me permet de résoudre mon problème directement et celle de koala64 m'a rappelé de faire attention à IE (j'avais oublié)
A+
Etrange chez moi, ça ne marche pas, le i n'est pas évalué au moment où l'on ajoute la fonction mais à l'appel, et il vaut donc toujours as.length car c'est la derniere valeur qu'il prend.
Peut-on forcer le i variable à se subsituer en sa valeur au moment où l'on ajoute la fonction ?
Comme ça:


for(i = 0; i < as.length; i++) {
  as[ i ].addEventListener("click", (function(index) {
    return function(e) { modif(index); };
  })(i), false);
}
merci pour ta réponse, ça m'a l'air drolement tordu ton truc !

entre temps j'ai trouvé un autre tour de passe passe :

      var nbFields=3;
      function bam(i)
      {
        alert(i);
      }
      function init()
      {
        var id;
        for(id=0 ; id<nbFields ; id++)
        {
          var frame=document.getElementById("frame"+id);
          frame.contentDocument.designMode='On';
          eval("frame.contentDocument.addEventListener('focus',function(e) {bam("+id+");},false)");
        }
      }
Le plus simple c'est quand même d'utiliser une fonction addEvent() toutes options, qui passe l'objet, et un paramètre optionnel comme celle de YUI ou comme celle ci :
function addEvent(obj, type, fn, par){
  if(obj.addEventListener){
    obj.addEventListener(type, function(event){        
      return fn.call(obj, event, par);
    }, false );
  }else if(obj.attachEvent){
    obj.attachEvent("on"+type, function(e){
      if (!e) var e = window.event;   
      return fn.call(obj, e, par);
    });
  }
}


ensuite il suffit de faire :
addEvent(el,'click',function(event,index){
   alert('mon element est '+this.tagName);
   alert('mon evenement est '+event.type);
   alert('mon index est '+index);
},i);


Comme, en général, avec le this dans la fonction, on n'a plus besoin de l'index, le quatrième paramètre permet de passer d'autre information tel la classe qui contient l'évènement par exemple.

function doSomething(){

  this.initialize = function(){
    addEvent(element,'click',function(event,fnc){
      fnc.doOtherThing(this);
    },this);
  };
  
  this.doOtherThing = function(el){
    alert('mon element est '+el.tagName);
  };
  
}


c'est super pratique, en fait c'est un peu comme l'exemple de Ze Nenex, sauf que l'on n'a pas besoin de le refaire à chaque fois, la fonction le fais pour nous.
Modifié par matmat (22 Jun 2008 - 01:50)
Sujet clos
Aller à