js事件传递机制
element.addEventListener(event, function, useCapture);
第一个参数是事件的类型 (如 “click” 或 “mousedown”).
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
默认值为 false
, 即冒泡传递,
当值为 true
时, 事件使用捕获传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
<style type="text/css">
#father{
width: 400px;
height: 400px;
background-color: red;
}
</style>
</head>
<body>
<div id="father">
<button id="btn">点我</button>
</div>
<script>
var btn = document.getElementById('btn');
var father = document.getElementById('father');
btn.addEventListener('click',function (ev) {
alert('点击了按钮');
/*点了按钮之后,先是触发'点击了father'
然后再触发'点击了按钮'
*/
},true);
father.addEventListener('click',function (ev1) {
alert('点击了father');
//这个只触发'点击了father',因为它的外部没有设置事件
},true)
</script>
</body>
</html>
实现块元素百分比的情况下居中
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
效果图
1.页面宽高正常时显示
2.页面宽高缩放时显示
特效:冒泡机制的应用,蒙版效果,登录页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>冒泡机制的应用</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height:3000px;
}/*不写也行,没有影响,写了显得专业*/
#mengban{
position: absolute;
left: 0;
top: 0;
opacity: 0.4;/*指定不透明度。从0.0(完全透明)到1.0(完全不透明)*/
width: 100%;
height: 100%;
background-color: black;
display: none;
}
#denglu{
width: 300px;
height: 300px;
background-color: skyblue;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);/*实现块元素百分比的情况下居中*/
display: none;
}
</style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="mengban"></div>
<div id="denglu"></div>
<script src="工具/Tool.js"></script>
<script>
window.addEventListener('load',function (ev) {
Tool.$('btn').addEventListener('click',function (ev1) {
//阻止冒泡
if (ev1 && ev1.stopPropagation){ //w3c标准
ev1.stopPropagation();
}else{ //ie系列
ev1.cancelBubble = true;
}
Tool.$('mengban').style.display = 'block';
Tool.$('denglu').style.display = 'block';
//因为蒙版的高只设置了100%,所以要隐藏页面超出的部分
//隐藏滚动条
document.body.style.overflow = 'hidden';
});
//监听点击文档
document.addEventListener('click',function (ev2) {
var e = ev2 || window.event;
//获取点击标签
var targetId = e.target ? e.target.id : e.srcElement.id;
//判断
if (targetId !== 'denglu'){
//除了登录之外的地方点击后要让蒙版、登录、滚动条恢复原样
Tool.$('mengban').style.display = 'none';
Tool.$('denglu').style.display = 'none';
document.body.style.overflow = 'auto';
} else{
window.location.href = 'https://www.csdn.net/';
//点击登录块,登录到 https://www.csdn.net/(csdn)
}
})
})
</script>
</body>
</html>