Ecouteur commun à plusieurs images

Version imprimable

03/09/2017, 15h11
moimp

Ecouteur commun à plusieurs images

Bonjour à tous,
J'ai un tableau de données qui ressemble à ceux de phpMyAdmin.
Comme dans phpMyAdmin, j'ai des images pour l'édition ou l'effacement de lignes de données. J'aimerais savoir comment je peux avoir un écouteur commun sur le clic d'une de ces images, avec juste comme paramètre l'identifiant de l'image ou de la ligne. Est-ce possible? Comment?
Bien sûr, je peux créer mes images avec un attribut onclick="mafonction(monid)" mais pour être cohérent, avec le reste de mon code, j'aimerais mieux utiliser un écouteur.

Je pense que tu peux faire comme suit. Je n'ai pas pris des images comme exemple, mais le principe est le même.

Dans mon exemple querySelectorAll prend tous les input qui ont la class print. Voir la doc de querySelectorAll pour les autres types de sélecteurs.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
</style>
<script>
function toto() 
{
  var coll = document.querySelectorAll('input.print');
  for (i=0;i<coll.length;i++)
  {
 coll[i].addEventListener("click", maFonctionClic, false);
  }
}
function maFonctionClic(e)
{
 alert(this.id + ' - ' + e.srcElement.tagName);
}
</script>
</head>
<body onload="toto()">
<input class="print" type="checkbox" id="cb1"/><br/> 
<input class="print" type="checkbox" id="cb2"/><br/> 
<input class="print" type="checkbox" id="cb3"/><br/> 
<input class="print" type="checkbox" id="cb4"/><br/> 
<input class="print" type="checkbox" id="cb5"/><br/> 
<input class="print" type="checkbox" id="cb6"/><br/> 
</body>
</html>

04/09/2017, 15h00
moimp

Merci. Je retiens provisoirement ta solution. Elle revient à créer un écouteur par élément (image dans mon cas). Je laisse cependant ma question pour voir si d'autres solutions existeraient.

Citation:

Elle revient à créer un écouteur par élément

Heu du coup je en pige pas ta notion d'écouteur commun ?...

le click est au niveau de l'image...

éventuellement on peut envisager d'encapsuler les images dans un div et de compter sur le propagation pour récupérer l’élément cliqué
Code:

1 2 3 4 5 6 7 8 9 <div id="commun" > <input class="print" type="checkbox" id="cb1"/><br/> <input class="print" type="checkbox" id="cb2"/><br/> <input class="print" type="checkbox" id="cb3"/><br/> <input class="print" type="checkbox" id="cb4"/><br/> <input class="print" type="checkbox" id="cb5"/><br/> <input class="print" type="checkbox" id="cb6"/><br/> </div>
Code:

1 2 document.getElementById('commun').addEventListener("click", function(e){ console.log( e.target.id) }, false);

04/09/2017, 16h39
NoSmoking

Bonjour,

Citation:

Envoyé par moimp

J'ai un tableau de données qui ressemble à ceux de phpMyAdmin.
Comme dans phpMyAdmin, j'ai des images pour l'édition ou l'effacement de lignes de données

l'élement commun existant, la <table>, je privilégierais également la délégation d'événements comme l'indique SpaceFrog.
04/09/2017, 17h01
moimp

Merci à vous tous, me voilà avec deux solutions. Je pense que je vais retenir la seconde en délégation d’événement. Je ne l'ai jamais fait. C'est l'occasion d'essayer.
16/09/2017, 19h11
moimp

Merci SpaceFrog et NoSmoking. Après quelques adaptations au cas particulier de mon application, la solution donne satisfaction. Je vous mets +1.