addeventlistener u otro método para actuar en muchos botones

[majete]

Hola a todos,
Actualmente utilizo una función y un listener para cambiar la "class" de un DIV cuando se pulsa un botón. El mismo está dentro de la DIV, y al pulsar el botón cambia su aspecto.

Código Javascript:

<script type="text/javascript">
    function changeClass()
    {
        var elemento
        /* elemento es el DIV */
        document.getElementById("elemento").className += " best-price";
 
    }
 
    window.onload = function()
    {
        var radio
        document.getElementById("boton").addEventListener( 'click' , changeClass );
    }
    </script>
 

El tema es que esto tengo que aplicarlo ahora a 40 elementos DIV y cada uno de ellos tiene 10 botones que actúan de "radiobuttons", por lo que el tema se complica y no quiero meter mucho código. La idea es que es un cuestionario con 40 preguntas (cada una de ellas en un div) y una escala de 10 valores para responder (con botones que hacen de radiobuttons). Quiero hacer que cuando una persona responda a esa pregunta cambie su aspecto para que el usuario vea que ya la ha respondido.
El id de los DIV será id=q1,q2,q3...q40
A los botones id=q1_1,q1_2,q1_3,etc.

¿Qué utilizaríais?

Si utilizo código en cada botón para llamar a una función, como son en total 400 botones igual estoy complicando el asunto. Por ejemplo:

En los botones

Código Javascript:

onclick="preguntaRespondida(this)"
 

En cambio si utilizo el listener de arriba, no sé como hacerlo para que me valga para cualquier botón y capa div. Además no sé si es conveniente y si puede afectar a otros elementos fuera del formulario en el evento "click".

¿Qué me recomendáis? He encontrado varios métodos cada cuál distinto, pero para este caso de 40 divs y 400 botones en total?

Gracias!
JC

[carlillos]

Podrías ponerle la misma clase a cada botón para luego generar una lista de esos botones con "getElementsByClassName", luego haces un loop para agregar el evento a cada botón.

Código HTML:

<div id="div1">
    <p>Texto 1</p>
    <button type="button" class="boton" name="1">Responder</button>
</div>
 
<div id="div2">
    <p>Texto 2</p>
    <button type="button" class="boton" name="2">Responder</button>
</div>
 
<script>
var botones = document.getElementsByClassName('boton');
 
for (var i = 0; i < botones.length; i++) {
    crear_evento(botones[i]);
}
 
function crear_evento(boton) {    
    boton.onclick = function () {        
        document.getElementById('div' + boton.name).className = 'nueva_clase';        
    }    
}
</script>
 

Cada botón tiene un atributo "name" diferente para identificarlo y cambiar su div correspondiente. Este ejemplo tiene 2 divs pero funciona para la cantidad que sea.
Saludos.

[Alexis88]

Como ya lo he dicho en repetidas ocasiones, la mejor manera de registrar un evento y un mismo handler en varios elementos, es delegando el evento a cualquiera de los elementos ancentros de los elementos a afectar. Por ejemplo, puedes delegarlo al documento y, mediante la propiedad target del objeto del evento, capturar al elemento en el cual se produjo el evento (elemento objetivo), verificar que su clase sea la que asignamos a los elementos en cuestión y, de cumplirse la condición, se procederá a ejecutar las instrucciones respectivas:

Código Javascript:

document.addEventListener("evento", function(event){
    if (event.target.className == "clase"){
        //Instrucciones
    }
}, false);
 

Es mucho más eficiente hacerlo así que recorriendo al conjunto de elementos e ir delegando el evento a cada uno de ellos. Además, esta forma también es útil para cuando se desea trabajar con elementos dinámicos.

Un saludo