案例：
QQ截图20170315133057.png
box2在box1里面
需求：点击box1可改变box1颜色但不改变box2的颜色，点击box2可改变box2颜色，box2的点击事件必须在父元素box1代理。
思路：因事件代理的运作原理是子元素事件冒泡到父元素事件触发执行，所以子元素不能用阻止冒泡方法，需在父元素的事件触发对target进行判断：
$('.box1').addEventListener('click',function(e){
if(e.target.className==='box1'){ //判断目标是不是box1
$('.box1').style.backgroundColor='yellow'
}
if(e.target.className==='box2'){ //判断目标是不是box2
e.target.style.backgroundColor='#FFF'
}
})
在实际工作中，由于子元素可能是很多个，或者是动态数量，不可能给每个元素添加事件触发，需在父元素事件代理。但父元素本身可能也绑定了事件，所以需在触发事件前判断目标
把案例再进阶复杂化：
QQ截图20170316231730.png
需求：点击box1可改变box1颜色但不改变box2的颜色，点击box2可改变box2颜色，点击box3可改变box2和自身的颜色，所有点击事件必须由父元素box1代理。
PS：这情况在实战中其实也很容易碰到，例如ul里有li，li里又有a，ul绑定事件1，li绑定事件2，点击li里的元素也要绑定事件2
$('.box1').addEventListener('click',function(e){
if(e.target.className==='box1'){
$('.box1').style.backgroundColor='yellow' //事件1
}
if(e.target.className==='box2'||e.target.parentNode.className==='box2'){
$('.box2').style.backgroundColor='#FFF' //事件2
}
})
