昨天一个小姐姐问了我一个关于事件冒泡的,我本身对事件冒泡这个理解也不是很透彻,现在记录一下;
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