Haga clic en evento en elemento dinámico SIN jQuery

Question

Me gustaría agregar un evento como onclick o mouseover a un elemento creado dinámicamente (similar a la función .live en jQuery) ... ¿cómo hago esto usando javascript puro sin un marco como jQuery? Aquí hay un jsFiddle simple http://jsfiddle.net/3tBpv/1/

Me gustaría poder hacer esto desde la clase divs recién creada en lugar de una identificación.

Cualquier ayuda sería muy apreciada

Answer 1

Crear un controlador en el objeto de documento. Verifique la clase del elemento objetivo y el nombre del nodo (etiqueta). Si coinciden, proceda con lo que sea necesario hacer, de lo contrario, ignore el clic.

document.onclick = function(event) { 
    var el = event.target; 
    if (el.className == "new" && el.nodeName == "DIV") { 
     alert("div.new clicked"); 
    } 
}; 

Aquí hay un fiddle.

Answer 2

@Anurag's answer es correcto pero no completo y en la mayoría de los casos dará lugar a una gran cantidad de errores de integración.

Aquí es la versión correcta:

document.addEventListener("click", function(event) 
{ 
    // retrieve an event if it was called manually 
    event = event || window.event; 

    // retrieve the related element 
    var el = event.target || event.srcElement; 

    // for all A tags do the following 
    if (el instanceof HTMLAnchorElement) 
    { 
     //required to make the "return false" to affect 
     event.preventDefault(); 

     window.location.href = "/click.php?href="+encodeURIComponent(el.href); 

     //prevent user's click action 
     return false; 
    } 
}, true); 

Se trata de una funcionalidad básica clic-trace afecta a todos los enlaces en la página de rastrear/registro todos los clics de enlace.