javascript事件冒泡和事件捕获实例讲解及分析

<div class="box">
     <p class="box1"></p>
</div>

.box{
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}
.box1{
    width: 150px;
    height: 150px;
    background-color: #FF0000;
    margin: 75px auto;
}

　//获取被操作的元素

　var div_v = document.querySelector('.box');
　var p_v = document.querySelector('.box1');

div_v.addEventListener('click' , function  () {
    console.log("父级元素");
} ,true);
p_v.addEventListener('click' , function  () {
    console.log("子集元素");
} ,true);
document.getElementsByTagName("body")[0].addEventListener('click' ,function  () {
    console.log("根元素");
} ,true);

　//获取被操作的元素

　var div_v = document.querySelector('.box');
　var p_v = document.querySelector('.box1');

div_v.addEventListener('click' , function  () {
    console.log("父级元素");
});
p_v.addEventListener('click' , function  () {
    console.log("子集元素");
});
document.getElementsByTagName("body")[0].addEventListener('click' ,function  () {
    console.log("根元素");
});

<ul>
    <li>子元素1</li>
    <li>子元素2</li>
    <li>子元素3</li>
</ul>

ul{
    width: 100px;
    border: 1px solid #000;
}
li{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    list-style: none;
    cursor: pointer;
}

var ul_v = document.querySelector('ul');
ul_v.addEventListener('mouseover' ,function  (e) {
    //e.target.parentNode.children 获取父元素下的所有子元素
    //使用e.target 不适用this 的原因:受到冒泡的影响,this会改变,而e.target只接受事件的目标DOM元素
    for (var i = 0;i<e.target.parentNode.children.length;i++) {
        e.target.parentNode.children[i].style.backgroundColor = "#fff";
    }
    e.target.style.backgroundColor = "red";
});