JS事件冒泡和事件代理（委托）【转载】
事件冒泡
什么是事件冒泡？
当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window （注意这里传递的仅仅是事件 并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件 也不会有什么表现 但事件确实传递了。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='parentID' onclick="parentfunc()">
<div id='childID' onclick="childfunc()">你好</div>
</div>
<script>
function parentfunc() {
alert('父级事件触发了！')
}
function childfunc(){
alert('子级事件触发了！')
}
</script>
</body>
</html>以上代码，触发了childID的点击事件，但是他的父级也会被触发，这个情况就是冒泡排序，那么如何阻止冒泡排序呢，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='parentID' onclick="parentfunc()">
<div id='childID' onclick="childfunc()">你好</div>
</div>
<script>
function parentfunc() {
alert('父级事件触发了！')
}
function childfunc(){
alert('子级事件触发了！')
stopBubble();
}
function stopBubble(e) {
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ){
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
}else{
//否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
</script>
</body>
</html>阻止冒泡排序有两种情况，如下：
标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可
非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了事件代理（委托）
事件委托是利用事件的冒泡原理来实现的，比如我们平时在给ul中的li添加事件的时候，我们都是通过for循环一个个添加，如果li很多个的话，其实就有点占内存了，这个时候可以用 事件代理来优化性能，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul id = 'ulid' onclick='clickfunc()'>
<li>第1个li</li>
<li>第2个li</li>
<li>第3个li</li>
<li>第4个li</li>
<li>第5个li</li>
</ul>
<script>
function clickfunc(ev) {
var ev = ev || window.event;
var oLi = ev.srcElement || ev.target;
if(oLi.nodeName.toLowerCase() == 'li'){
alert(oLi.innerText)
}
}
</script>
</body>
</html>这里所有的li事件都写在ul中，通过节点去判断是否为li节点，即可
