Ecouteur commun à plusieurs images

**moimp** · 03/09/2017, 15h11

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.

**badaze** · 03/09/2017, 23h25

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

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

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>

**moimp** · 04/09/2017, 15h00

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.

**SpaceFrog** · 04/09/2017, 15h18

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 :

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

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 :

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

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

**NoSmoking** · 04/09/2017, 16h39

Bonjour,

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.

**moimp** · 04/09/2017, 17h01

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.

**moimp** · 16/09/2017, 19h11

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

Ecouteur commun à plusieurs images

JavaScript

Discussions similaires

Partager

Partager