事件捕获与事件冒泡

昨天一个小姐姐问了我一个关于事件冒泡的，我本身对事件冒泡这个理解也不是很透彻，现在记录一下；

1、了解DOM标准的事件模型

DOM标准同时支持事件捕获跟事件冒泡，整个DOM流程是：事件捕获---捕获到目标---事件冒泡；捕获跟冒泡两种事件流都会触发DOM中的所有对象(图是自己画的，网上有很多更好看的，可以看看）

2、如上图，事件捕获是自上而下去触发事件，而事件冒泡是自下而上；jq阻止冒泡（e.stopPropagation）；

CSS部分：
body,html{width:100%;height:100%;}
#div{background: red;height:100px}

HTML部分
<body id="body">
    <div id="div">
        <button id="p">123</button>
    </div>
</body>


JQ部分：
    $(function(){
        $("#body").click(function(){
            console.log("body");
        });
        $("#div").click(function(even){
            console.log("div");
            even.stopPropagation();
        });
        $("#p").click(function(){
            console.log("button");
        });
    });

当你点击div时，打印的会是div，点击button时，打印的会是button，div;

3、鼠标放到对应li背景色改变；（相对于平时直接给li绑定事件，使用事件冒泡的好处是少了一个遍历所有节点的操作，在性能上更优，而且在动态加载li时，如果像平时直接给li绑定事件那样子做的话，动态加载多一个或者多个li元素之后，还要再绑定一次事件，而使用事件冒泡则不用）

html:
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

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

备注：第三点是看别人的博文弄过来的（觉得写的挺好的），这个是人家的博文链接https://www.cnblogs.com/qq9694526/p/5653728.html

事件捕获与事件冒泡

猜你喜欢