js学习笔记：DOM事件委托运用的复杂案例

案例：

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
       
    }
})