Modification de l'event onChange d'un select via javascript

Version imprimable

19/01/2010, 11h44
robertt

Modification de l'event onChange d'un select via javascript
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:

<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:

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 !
19/01/2010, 11h46
SpaceFrog

addEventListener et attachEvent
19/01/2010, 12h05
robertt

Citation:

Envoyé par SpaceFrog

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.

Quelque chose dans ce style là :

Code:

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);

Sinon, tu peux aussi faire :

Code:

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');
};

Citation:
Envoyé par Bovino
Sinon, tu peux aussi faire :
Code:

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;'.

Citation:
Envoyé par RomainVALERI
Quelque chose dans ce style là :
Code:

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 !

19/01/2010, 14h22
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

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:

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'); };

19/01/2010, 15h07
SpaceFrog

non tu rappelles la focntion, si tu ajoute les () tu l'exéctues ...
19/01/2010, 15h30
RomainVALERI

Citation:

Envoyé par SpaceFrog

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

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

Au temps pour moi

Code:

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>

Citation:
Envoyé par SpaceFrog
Au temps pour moi
Code:

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>
:ccool:

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...