JS 事件的冒泡 stopPropagation

<style>
#one{
    width:500px;
    height:500px;
    position:absolute;
    border-radius: 50%;
    background:pink;
    left:400px;
}
#two{
    width:400px;
    height:400px;
    position:absolute;
    border-radius: 50%;
    background:purple;
    left:50px;
    top:50px;
}
#three{
    width:300px;
    height:300px;
    position:absolute;
    border-radius: 50%;
    background:orange;
    left:50px;
    top:50px;
}
#four{
    width:200px;
    height:200px;
    position:absolute;
    border-radius: 50%;
    background:yellowgreen;
    left:50px;
    top:50px;
}
#five{
    width:100px;
    height:100px;
    position:absolute;
    border-radius: 50%;
    background:red;
    left:50px;
    top:50px;
}
</style>
<div id="one" color="pink">
    <div id="two" color="purple">
        <div id="three" color="orange">
            <div id="four" color="yellowgreen">
                <div id="five" color="red"></div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    //获取元素
    var divs = document.getElementsByTagName('div');
    //遍历绑定
    for(var i=0;i<divs.length;i++) {
        divs[i].onclick = function(e) {
            this.style.background = 'black';
            //阻止事件冒泡
            e.stopPropagation();
        }

        //绑定鼠标的移入事件
        divs[i].onmouseover = function(e) {
            this.style.background = 'cyan';
            e.stopPropagation();
        }

        divs[i].onmouseout = function(e) {
            //获取当前这个元素的颜色值
            var color = this.getAttribute('color');
            this.style.background = color;
            e.stopPropagationation();
        }
    }
</script>