what's the behind jquery event delegate?
<p>Someone told me sometimes event delegate more efficient.</p>

<pre><code>&lt;ul id="test"&gt;
    &lt;li&gt;aaaaa&lt;li&gt;
    &lt;li&gt;bbbbb &lt;p&gt;xxxxx&lt;p&gt; &lt;/li&gt;
    &lt;li&gt;ccccc&lt;li&gt;
&lt;/ul&gt;

//script
var li = document.getElementByTagName('li');
for(var i=0,len=li.length;i&lt;len;i++){
    li[i].addEventListener('click',function(){ alert(this.innerHTML); },false);
}

//event delegate
var ul = document.getElementById('test');
ul.addEventListener('click',function(e){
    if(e.target == 'li'){
        alert(e.target.innerHTML);
    }
},false);
</code></pre>

<p>It works not good when you click 'p' in 'li'. I know jquery has method 'on',it's useful. 
I try to read jquery source code ,but can not understand how to implement a delegate function  work under complexity DOM.</p>
