Discussion :

[robertt]

Bonjour à tous,

je parcours depuis longtemps ce forum qui m'a bien aidé pour résoudre la plupart de mes problèmes. Aujourd'hui toutefois, je séche...

je m'explique:

Du côté HTML, j'ai un select vide (sera rempli plus tard par javascript). Ce select contient quand même un event onChange qui fait 'alert('toto');' Ce select est dans un form (de nom calcul).
par exemple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name="test" onChange="alert('toto');"></select>

Ensuite, par javascript, je rempli les options de ce select mais je voudrais aussi modifier l'event onChange mais sans écraser le alert('toto') déjà existant. En effet, j'arrive parfaitement à modifier le onChange mais cela ecrase tout... je ne sais pas trop comment faire un append en fait pour compléter l'event onChange.

Actuellement, j'ai ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
document.calcul.test[0] = new Option("description 1","1");
document.calcul.test[1] = new Option("description 2","2"); 
document.calcul.test.onchange = function() { alert('tutu'); };

Moi, ce que je voudrais à la fin dans l'event onChange, c'est en premier alert('tutu') puis ensuite le alert('toto') initial.

Je ne vois pas trop comment procéder pour faire cela... si vous pouviez m'aider.... j'ai tenté avec firebug d'y voir plus clair mais je n'arrive pas à récupérer sous forme de string le contenu initial de l'event onChange afin que je fasse un append avec mon alert('tutu');....

Merci bcp !

[SpaceFrog]

addEventListener et attachEvent

[robertt]

addEventListener et attachEvent

ok, merci; je ne connais pas du tout addEventListener attachEvent, je vais donc fouiller dans ce sens... je ne suis pas un pro du js, je l'utilise par obligation...
J'espère trouver mon bonheur avec ces méthodes.

[RomainVALERI]

Quelque chose dans ce style là :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function addEvent(cible, type, effet) {
   if (document.addEventListener) {
      cible.addEventListener(type, effet, false);
   }
   else if (document.attachEvent) {
      cible.attachEvent("on" + type, effet);
   }
}
 
function gestionClick (ev) {
   alert("vous avez cliqué sur l'élément");// quitte à utiliser ev.target ou quoi que ce soit...
}
 
var monElement = document.getElementById("machinChouette");
addEvent(monElement, "click", gestionClick);

[Bovino]

Sinon, tu peux aussi faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var oldEvent = document.calcul.test.onchange;
document.calcul.test[0] = new Option("description 1","1");
document.calcul.test[1] = new Option("description 2","2"); 
document.calcul.test.onchange = function() {
    oldEvent;
    alert('tutu');
};

[robertt]

Sinon, tu peux aussi faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var oldEvent = document.calcul.test.onchange;
document.calcul.test[0] = new Option("description 1","1");
document.calcul.test[1] = new Option("description 2","2"); 
document.calcul.test.onchange = function() {
    oldEvent;
    alert('tutu');
};

Cette solution ne fonctionne pas chez moi... c'est dommage, cela paraissait la plus simple. Cela ne provoque aucune erreur mais l'event initial n'est plus pris en compte... seul le nouveau est appelé, et ce, qu'importe l'ordre dans lequel j'écris le onchange, à savoir 'oldEvent; alert('tutu');' ou 'alert('tutu'); oldEvent;'.

[robertt]

Quelque chose dans ce style là :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function addEvent(cible, type, effet) {
   if (document.addEventListener) {
      cible.addEventListener(type, effet, false);
   }
   else if (document.attachEvent) {
      cible.attachEvent("on" + type, effet);
   }
}
 
function gestionClick (ev) {
   alert("vous avez cliqué sur l'élément");// quitte à utiliser ev.target ou quoi que ce soit...
}
 
var monElement = document.getElementById("machinChouette");
addEvent(monElement, "click", gestionClick);

Cette solution fonctionne nickel chez moi... c'est ce qu'il me fallait.

Par contre, je ne comprends pas le commentaire "// quitte à utiliser ev.target ou quoi que ce soit..."... ca signifie quoi ?

Et dernière question (pour le moment ), l'ordre des callbacks définies sur un event est-il garanti ? Mon onChange initial sera-t-il toujours appelé avant le deuxième que je set avec le addEventListener ? j'ai cru comprendre que non mais je voudrais un avis sur le sujet...

En tous cas, merci bien, j'ai appris un truc sur javascript today... c'est assez puissant quand même ce que l'on peut faire... j'suis sûr que j'utilise a peine 10% des possibilités donc il me reste à apprendre, c'est cOOl !

[SpaceFrog]

Beff s'est emmêlé les crayons dans les indice ... sinon sa methode est bonne ...
on ne peut pas ajouter la fonction sur la collection, il faut le faire sure chaque option

[RomainVALERI]

Elle me plaisait bien aussi la suggestion de bovino... c'est pratique et je n'y avais jamais pensé. Par contre, est-ce qu'il ne manque pas des parenthèses ici pour appeler le gestionnaire préexistant ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var oldEvent = document.calcul.test.onchange;
document.calcul.test[0] = new Option("description 1","1");
document.calcul.test[1] = new Option("description 2","2"); 
document.calcul.test.onchange = function() {
    oldEvent();
    alert('tutu');
};

[SpaceFrog]

non tu rappelles la focntion, si tu ajoute les () tu l'exéctues ...

[RomainVALERI]

si tu ajoute les () tu l'exéctues ...

J'ai peut-être raté une marche () mais... n'est-ce pas précisément ce qu'on cherche à faire ? ^^

[SpaceFrog]

Au temps pour moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function foo(obj){
var bar=obj.onclick
obj.onclick= function(){ bar();
                         alert('hello');
                         }
               }           
</script>
</head>
<body>
<div id="one" onclick="alert('coucou');">test</div>
<input type="button" onclick="foo(document.getElementById('one'))" value="surcharge" />
</html>

[robertt]

Au temps pour moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
function foo(obj){
var bar=obj.onclick
obj.onclick= function(){ bar();
                         alert('hello');
                         }
               }           
</script>
</head>
<body>
<div id="one" onclick="alert('coucou');">test</div>
<input type="button" onclick="foo(document.getElementById('one'))" value="surcharge" />
</html>

pas évident au début la distinction avec et sans parenthèses... mais là, effectivement, ca fonctionne bien, ie et ff.

Après, quelle solution est la mieux ? celle-ci est DOM-0 donc accepté normalement par tous les navigateurs alors que le addEventListener, c'est du DOM-2 donc déjà plus problèmatique pour la parfaite compatibilité. Après, les 2 ont l'air de bien fonctionner sous ie et ff, faudrait tester plus de navigateur et/ou de version...