¿Delegación de eventos de JavaScript, manejo de elementos primarios de elementos cliqueados?

http: //jsfiddle.net/walkerneo/QqkkA

He visto muchas preguntas aquí, ya sea preguntando o respondiendo con la delegación de eventos en javascript, pero aún no he visto cómo utilizar la delegación de eventos para elementos que no van a ser los objetivos del evento de clic .

Por ejemplo

HTML:

<ul>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
    <li><div class="d"></div></li>
</ul>​

CSS:

ul{
    padding:20px;
}
li{
    margin-left:30px;
    margin-bottom:10px;
    border:1px solid black;

}
.d{
    padding:10px;
    background:gray;
}
​

¿Qué pasa si quiero agregar un evento de clic para manejar elli elementos cuando se hace clic? Si adjunto un controlador de eventos a laul elemento, eldivs siempre serán los elementos objetivo. Además de verificar cada elemento primario del elemento de destino en una función de clic, ¿cómo puedo lograr esto?

editar

Quiero usar la delegación de eventos en lugar de:

var lis = document.getElementsByTagName('li');
for(var i=0;i<lis.length;i++){
    lis[i].onclick = function(){};
}

Pero si lo hago

document.getElementsByTagName('ul')[0].addEventListener('click',function(e){

    // e.target is going to be the div, not the li
    if(e.target.tagName=='LI'){

    } 
},false);

EDIT: No estoy interesado en cómo usar las bibliotecas Javascript para esta, Estoy interesado en cómo lo hacen y cómo se puede hacer con js puro.

Respuestas a la pregunta(4)

Su respuesta a la pregunta