事件流
事件流是对事件执行过程的描述,了解事件的执行过程有助于加深对事件的理解,提升开发实践中对事件运用的灵活度。
如上图所示,任意事件被触发时总会经历两个阶段:【捕获阶段】和【冒泡阶段】。
简言之,捕获阶段是【从父到子】的传导过程,冒泡阶段是【从子向父】的传导过程。
捕获和冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
//事件流-- 事件捕获 从外到里 123
document.addEventListener('click',function () {
console.log(1);
},true)
document.querySelector('.father').addEventListener('click',function () {
console.log(2);
},true)
document.querySelector('.son').addEventListener('click',function () {
console.log(3);
},true)
</script>
</body>
</html>
执行上述代码后发现,当单击事件触发时,其祖先元素的单击事件也【相继触发】,这就是捕获阶段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
//事件流-- 事件冒泡 从里到外 321
document.addEventListener('click',function () {
console.log(1);
},false)
document.querySelector('.father').addEventListener('click',function () {
console.log(2);
},false)
document.querySelector('.son').addEventListener('click',function () {
console.log(3);
},false)
</script>
</body>
</html>
如果事件是在冒泡阶段执行的,我们称为冒泡模式,它会先执行子盒子事件再去执行父盒子事件,默认是冒泡模式(false)。
阻止冒泡
阻止冒泡是指阻断事件的流动,保证事件只在当前元素被执行,而不再去影响到其对应的祖先元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
width: 200px;
height: 200px;
background-color: pink;
}
.son{
width: 100px;
height: 100px;
background-color: aqua;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
//事件流-- 事件冒泡 从里到外 321
document.addEventListener('click',function () {
console.log(1);
},false)
document.querySelector('.father').addEventListener('click',function (e) {
console.log(2);
e.stopPropagation()
},false)
document.querySelector('.son').addEventListener('click',function (e) {
console.log(3);
e.stopPropagation()
},false)
</script>
</body>
</html>
结论:事件对象中的 ev.stopPropagation
方法,专门用来阻止事件冒泡。
鼠标经过事件:
mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果 (推荐)
事件委托
事件委托是利用事件流的特征解决一些现实开发需求的知识技巧,主要的作用是提升程序效率。
大量的事件监听是比较耗费性能的,如下代码所示
其他事件
页面加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
有些时候需要等页面资源全部处理完了做一些事情
监听页面所有资源加载完毕:
window.addEventListener('load', function() {
// xxxxx
})
元素滚动事件
滚动条在滚动的时候持续触发的事件
window.addEventListener('scroll', function() {
// xxxxx
})
页面尺寸事件
会在窗口尺寸改变的时候触发事件:
window.addEventListener('resize', function() {
// xxxxx
})