Javascript adjuntar caso a nombre de la clase

Question

Si tengo 10 artículos, con el nombre de clase keyword:

<div class="keyword"></div> 

¿Cómo puedo adjuntar un evento, por ejemplo click, en este elemento.

He intentado lo siguiente, pero sin suerte: (ninguna alerta surge)

document.getElementsByClassName('.keyword').onclick = function() 
{ 
    alert(true); 
    Search.addKey(this.getElementsByClassName('name')[0].innerHTML); 
} 

Requisitos:

• sin el atributo onclick
• sin jQuery o cualquier otra biblioteca

Nota: los elementos no se generan en la carga de la página. Su número puede ser diferente, cada vez que haga clic en un botón para, por ejemplo.

Necesito una forma de adjuntar a todas las etiquetas con la clase 'palabra clave' en el 'futuro'.

Answer 1

Debe delegar el evento. Pruebe esto:

if (document.body.addEventListener) 
{ 
    document.body.addEventListener('click',yourHandler,false); 
} 
else 
{ 
    document.body.attachEvent('onclick',yourHandler);//for IE 
} 

function yourHandler(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement; 
    if (target.className.match(/keyword/)) 
    { 
     //an element with the keyword Class was clicked 
    } 
} 

Puede leer más sobre la delegación de eventos en quirksmode.com. AFAIK, esta es la mejor manera de lograr lo que estás tratando de lograr. Así es como todas las grandes bibliotecas (prototipo, jQuery, ...) trabajan entre bastidores

Actualizar:

Here's the fiddle, que contiene un poco más de explicación. Una referencia interesante es this página. Me ayudó a entender la forma en que los eventos de IE y W3C difieren y, crucialmente, me ayudó a comprender el valor e innumerables beneficios de la Delegación de evento