事件冒泡与事件委托和其他知识点
事件冒泡
就是当一个子元素的事件被触发的时候onclick事件，该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件
<div id="parent" style="background-color: #000;height: 400px;width: 400px" data-id="11">
<div id="child" style="background-color: #fff;height: 200px;width: 200px" data-id="22"></div>
</div>
document.getElementById('parent').onclick=function () {
console.log(this.getAttribute('data-id'));
};
document.getElementById('child').onclick=function (e) {
console.log(this.getAttribute('data-id'));
};
事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，是不是想到了？对啦，其实就是将子元素的事件通过冒泡的形式交由父元素来执行
置顶菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-置顶菜单</title>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
(window).scroll(function() {
var nowTop = ('.menu').css({
position:'fixed',
top:0,
// 定位 一半
left:'50%',
marginLeft:-480,
})
('.menu').css({
// 对原来的样式进行覆盖
position:'static',
marginLeft:'auto',
})
$('.menu_pos').hide();
}
});
})
</script>
<style type="text/css">
body{margin:0px;}
.logo_bar{
width:960px;
height:200px;
background-color:#f0f0f0;
margin:0 auto;
}
.menu,.menu_pos{
width:960px;
height:50px;
margin:0 auto;
background-color:gold;
text-align:center;
line-height:50px;
}
.menu_pos{
display:none;
}
.down_con{
width:960px;
height:1800px;
margin:0 auto;
}
.down_con p{
margin-top:100px;
text-align:center;
}
.totop{
width:50px;
height:50px;
background:url(images/up.png) center center no-repeat #000;
border-radius:50%;
position:fixed;
right:50px;
bottom:50px;
display:none;
}
</style>
</head>
<body>
<div class="logo_bar">顶部logo</div>
<div class="menu">置顶菜单</div>
<div class="menu_pos"></div>
<div class="down_con">
<p style="color:red">网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
<p>网站主内容</p>
</div>
<a href="javascript:;" class="totop"></a>
</body>
</html>
滚动
元素脱离文档流是其他元素的布局排版不会收到这个元素的影响，就当这个元素不存在
脱离文档流有三种方式：absolute、float、fixed，这三种也有区别：
absolute：定位取决于它的父元素有没有定位，如果有那么它就根据定位的父元素定位，如果没有就会一级一级的向上找，直到找到body
float：它脱离文档流的时候其他元素仍然会当这个元素不存在，但是其他元素盒子中的文本仍然会环绕在这个元素周围
fixed：以窗口左上角为原点定位，定位之后相对于窗口的位置始终不变
