Mixage des gestionnaires d'événements CSS et Javascript

Question

J'aimerais pouvoir affecter le même gestionnaire d'événements à un certain nombre d'éléments div différents. Chaque élément aura un style unique.

J'enregistré le eventhandler comme ceci:

<script type="text/javascript"> 

function add_something() { 
    document.getElementById('manipulate').onclick = do_something; 
} 

function do_something(e) { 
this.style.property = value; 
} 

window.onLoad = add_something; 
</script> 

donc je peux assigner un gestionnaire d'événements à un élément comme ceci:

<div id="manipulate"></div> 

Le problème est que je veux attribuer ce gestionnaire à plusieurs éléments, chacun avec un style unique, et je veux utiliser CSS pour le faire. mais je ne suis pas sûr de savoir comment faire ça.

Finalement, je veux quelque chose qui ressemble à ceci:

<style> 
#element1{...} 
#element1{...} 
#element1{...} 
</style> 

.....

<div id="element1" class="manipulate"></div> 
<div id="element2" class="manipulate"></div> 
<div id="element3" class="manipulate"></div> 

Est-ce possible? Merci

Answer 1

Délégation d'événements?

HTML:

<div id="wrap"> 
    <div id="element1" class="manipulate">First element</div> 
    <div id="element2" class="manipulate">Second element</div> 
    <div id="element3" class="manipulate">Third element</div> 
</div> 

JavaScript:

var wrap = document.getElementById('wrap'); 

wrap.onclick = function (e) { 
    var elem = e.target; 

    elem.style.color = 'red'; 
}; 

démonstration en direct:http://jsfiddle.net/VLcPw/

Answer 2

Vous pouvez sélectionner des éléments par classe dans les navigateurs modernes, ou simplement utiliser jQuery et savoir qu'il fonctionne partout.

$(document).ready(function(){ 
    $('.manipulate').click(function(){alert('Hello.')}); 
    //or .hover/any other event. 
}); 

jQuery events.

Peut-être un exemple plus pertinent?

$('.manipulate').click(function(){ 
    $(this).addClass('whateverClass'); 
    //or 
    $(this).css('color', 'red'); 
}); 

Answer 3

Pourquoi vous ne donnez pas jquery un essai?

Avec jquery vous devriez juste besoin de ceci pour se lier à tous les éléments correspondants, le même événement click:

    $("div.manipulate").click(function(e) { 
     $(this).css(property, value); 
    }); 

propriété doit remplacée par une propriété CSS valide, la valeur d'une valeur correcte, bien sûr.