Javascript associare l'evento al nome della classe

Question

Se ho 10 elementi, con il nome della classe keyword:

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

Come posso allegare un evento, ad esempio click, su questo elemento.

Ho provato quanto segue, ma senza fortuna: (nessun allarme viene in su)

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

Requisiti:

• senza l'attributo onclick
• non jQuery o qualsiasi altra libreria

Nota: gli elementi non vengono generati al caricamento della pagina. Il loro numero può essere diverso, ogni volta che si fa clic su un pulsante per es.

Ho bisogno di un modo per allegare a tutti i tag con la parola chiave 'classe' nel 'futuro'.

Answer 1

È necessario delegare l'evento. Prova questo:

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 
    } 
} 

Si può leggere di più su delega evento quirksmode.com. AFAIK, questo è il modo migliore per ottenere ciò che stai cercando di ottenere. Questo è il modo in tutte le principali librerie (prototipo, jQuery, ...) lavorano dietro le quinte

Aggiornamento:

Here's the fiddle, contiene un po 'di spiegazione. Un riferimento interessante è la pagina this. Mi ha aiutato a capire il modo in cui gli eventi di IE e W3C sono diversi e, in modo cruciale, mi ha aiutato a capire il valore e gli innumerevoli vantaggi della Delegazione degli eventi