[Résolu] Appliquer une fonction à une classe

Hello à tous, j'ai une petite question dont je ne trouve pas la réponse sous google.

J'ai, pour simplifier, un ensemble de divs sur ma page, (une bonne centaine), tous de la même classe "rectangle". Je me rends compte que je souhaite leur coder un évènement "onClick" pour changer leur comportement.
Ma question est donc, comment appliquer un

onclick= function(){blablabla...}

à cette classe "rectangle", pour éviter de recopier ca ca dans chacun de mes divs à la main...

Merci d'avance pour vos conseils
Modifié par Yoyo85 (02 Aug 2010 - 16:42)

Hello,

Il suffit de parcourir en JavaScript les éléments concernés et de modifier leur attribut onclick :

function clickRectangle() {
  /* Blablabla */
}

// getRectangles doit renvoyer la liste des éléments concernés
var rectangles = getRectangles();

for (var i = 0; i < rectangles.length; ++i) {
  rectangles[ i].onclick = clickRectangle;
}

Avec une bibliothèque (ici jQuery), c'est nettement plus simple :

jQuery(".rectangle").click(function() {
  /* Blablabla */
});

// ou

jQuery(".rectangle").live("click", function() {
  /* Blablabla */
});

La seconde solution (event delegation) est moins coûteuse en temps de traitement initial et en encombrement de l'arbre DOM (surtout si tu as vraiment beaucoup d'éléments concernés), mais plus coûteuse en temps de traitement quand l'événement se produit.

<edit>En effet, il y avait une petite erreur dans le code.
Modifié par Julien Royer (02 Aug 2010 - 16:49)

Hello,

Tu peux récupérer les références de tous les éléments qui portent cette classe, puis, dans une boucle, associer ton gestionnaire d'évènement à chacun. Dans l'idéal on ferait ceci:

var rectangles = document.getElementsByClassName('rectangle');
for (var num=0, max=rectangles.length; num<max; num++) {
  rectangles[num].addEventListener('click', function(){
    // Faire des trucs...
    // L'élément cliqué est identifié par "this".
  }, false);
}

Comme ce serait trop simple que ça marche partout, et en particulier dans IE, il faudra utiliser des fonctions utilitaires cross-browser à la place de document.getElementsByClassName et de element.addEventListener. Avec jQuery, ça peut donner:

$('.rectangle').click(function(){
  // Faire des trucs...
  // L'élément cliqué est identifié par "this", utilisable comme objet jQuery
  // avec $(this).
});

Edit: grillé. Ceci dit, je crois qu'il y a une erreur dans le code de Julien.
Modifié par Florent V. (02 Aug 2010 - 16:42)

Impecc, ca marche avec Jquery. Je ne veut plus que coder qu'avec ça. Merci les amigos