冒泡：即使通过子级元素的事件来触发父级的事件，通过阻止冒泡可以防止冒泡发生。
事件源：首先这个东西是有兼容行问题的,当然解决也很简单。
两者结合使用，形成的事件委托有两个优势：
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>