js 事件冒泡、事件捕获、事件委托

事件冒泡:一直会往上触发事件

#div1{
    width: 200px;
    height: 200px;
    background-color: #00BFFF;
}
#div2{
    width: 100px;
    height: 100px;
    background-color: #A1CD3A;
}

<div id="div1">
    <div id="div2"></div>
</div>
<script type="text/javascript">
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");
    div2.onclick = function(event){
        console.log(1);
    };
    div1.onclick = function(){
        console.log(2);
    };
</script>

 

事件冒泡的应用

　　鼠标放到li上对应的li背景变灰。

　　　　<ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
            <li>item5</li>
            <li>item6</li>
        </ul>

 　 　　利用事件冒泡实现：

　  　　$("ul").on("mouseover",function(e){
                $(e.target).css("background-color","#ddd").siblings().css("background-color","white");
       })

　　　　给所有li都绑上事件

　　　　$("li").on("mouseover",function(){
                $(this).css("background-color","#ddd").siblings().css("background-color","white");
       })

 

 

 

浅谈JS事件冒泡 https://www.cnblogs.com/moqing/p/5590216.html

 

彻底弄懂JS的事件冒泡和事件捕获   https://www.cnblogs.com/qq9694526/p/5653728.html

 

 

性能