冒泡：即使通过子级元素的事件来触发父级的事件，通过阻止冒泡可以防止冒泡发生。
事件源：首先这个东西是有兼容行问题的,当然解决也很简单。
两者结合使用，形成的事件委托有两个优势：
1.减少性能消耗；
2.新添加的事件，也可以绑定时间，因为使用的是事件源而不是直接通过前面的程序来绑定。
以下例子，功能是通过事件冒泡的原理，将li的点击事件来触发ul的点击事件，在this指向确定的情况下，通过事件源的原理来确定当前点击的li，并获取li的内容。另外通过button的按钮可以添加li，而且这个li也可以有点击事件。
html：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> </head> <body> <input type="button" value="添加"> <ul id="ul1"> <li>111</li> <li>222</li> <li>333</li> <li>444</li> </ul> </body> </html>
js：
<script type="text/javascript">
window.onload = function(){
var oUl= document.getElementById('ul1');
var iNow = 4;
oUl.onclick = function(e){
var e = e || window.event;
var target = e.target || e.srcElement;
if(target.nodeName.toLowerCase() == 'ul'){
return false;
}
alert(target.innerHTML)
}
var button = document.getElementsByTagName('input')[0];
button.onclick = function(){
iNow++
var oLi = document.createElement('li');
oLi.innerHTML = '111' * iNow;
oUl.appendChild(oLi)
}
}
</script>