Web APIs 3（事件流、事件委托）
1.事件流
- 事件流：事件完整执行过程中的流动路径
- 捕获阶段：从DOM根元素开始去执行对应的事件（从外到里）
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
eg : 分别给document、父级div、子机div都注册同一个事件监听，则从外到内执行
-
冒泡阶段：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发（当一个元素触发事件后，会依次向上调用所有父级元素的同类型事件）
-
阻止冒泡：
- 问题：默认有冒泡模式的存在，容易导致事件影响父级元素
- 需求：想把事件就限制在当前元素内，需要阻止事件冒泡
- 前提：阻止事件冒泡要先拿到事件对象
- 语法：阻止事件流，不仅对冒泡有用，对捕获也有用
事件对象.stopPropagation()示例：点击son盒子时，事件流被阻止，只会弹出“我是儿子”
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { width: 400px; height: 400px; background-color: aqua; } .son { width: 200px; height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> <script> const fa = document.querySelector('.father') const son = document.querySelector('.son') document.addEventListener('click', function () { alert('我是爷爷') }) fa.addEventListener('click', function () { alert('我是爸爸') }) son.addEventListener('click', function (e) { alert('我是儿子') e.stopPropagation() }) </script> </body> -
解绑事件
元素.removeEventListener(‘事件类型’，事件处理函数)
- 注意：匿名函数无法被解绑
btn.removeEventListener('click',函数名)
2.事件委托
-
优点：减少时事件监听注册的次数，提高程序性能
-
原理：利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
-
实现：事件对象.target可以获得真正触发事件的元素
<body> <ul> <li>第1个孩子</li> <li>第2个孩子</li> <li>第3个孩子</li> <li>第4个孩子</li> <li>第5个孩子</li> <p>我不需要变色</p> </ul> <script> const ul = document.querySelector('ul') ul.addEventListener('click', function (e) { console.log(e.target); //点击的对象 //只要点li变色，p不要变色 if (e.target.tagName === 'LI') { e.target.style.color = 'red' } }) </script> </body> -
阻止默认行为的发生：e.preventDefault()
eg：点击提交默认直接提交，但表单信息有误时不允许提交，就需要使用该阻止方式
<body> <form action="http://www.baidu.com"> <input type="submit" value="提交"> </form> <script> const form = document.querySelector('form') form.addEventListener('click', function (e) { e.preventDefault() }) </script> </body>
3.其他事件
-
页面加载事件
- 定义：加载外部资源（如图片、外联CSS、JavaScript）加载完毕时触发的事件
- 使用场景：需要等页面资源全部处理完再做一些事情，eg:如果将script代码写到head中，直接找dom元素找不到
- load事件：监听页面所有资源加载完毕：给window添加load事件（当然也可以给针对某个资源绑定load事件）
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //等待页面所有资源加载完毕就会执行回调函数 window.addEventListener('load', function () { const btn = document.querySelector('button') btn.addEventListener('click', function () { alert("你好") }) }) </script> </head> <body> <button>点击</button> </body>- DOMContentLoaded事件：当HTML文档被完全加载和解析完后，无需等待样式表、图像等完全加载：给document添加DOMContenLoaded事件
-
元素滚动事件
- 滚动条滚动触发的事件
- scroll事件：监听整个页面滚动(也可以监听某个元素滚动)
<script> window.addEventListener('scroll', function () { console.log("滚动") }) </script>- 获取滚动位置的属性：scrollLeft|scrollTop（可读写）
<script> const div = document.querySelector('div') window.addEventListener('scroll', function () { //document.documentElement返回HTML元素 const n = document.documentElement.scrollTop console.log(n) if (n >= 100) { div.style.display = 'block' } else { div.style.display = 'none' } }) </script>- 滚动到指定坐标：元素.scrollTo(x,y)
-
页面尺寸事件
- 窗口尺寸发生改变时触发事件
- resize
<script> window.addEventListener('resize', function () { console.log(11); }) </script>- 检测屏幕尺寸——获取元素宽高
- clientWidth、clientHeight(不包含边框，margin,滚动条等，只读)
4.元素尺寸位置
- 获取宽高：offsetWidth和offsetHeight（包含边框，只读）
- 获取位置：offsetLeft和offsetTop（只读）：元素距离父级元素左上距离
案例：实现滚动到秒杀模块位置后，顶部导航滑动出现，再返回到秒杀模块上方后，顶部导航隐藏
<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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.content {
overflow: hidden;
width: 1000px;
height: 3000px;
background-color: pink;
margin: 0 auto;
}
.backtop {
display: none;
width: 50px;
left: 50%;
margin: 0 0 0 505px;
position: fixed;
bottom: 60px;
z-index: 100;
}
.backtop a {
height: 50px;
width: 50px;
background: url(./images/bg2.png) 0 -600px no-repeat;
opacity: 0.35;
overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
}
.header {
position: fixed;
top: -80px;
left: 0;
width: 100%;
height: 80px;
background-color: purple;
text-align: center;
color: #fff;
line-height: 80px;
font-size: 30px;
transition: all .3s;
}
.sk {
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: 500px;
}
</style>
</head>
<body>
<div class="header">我是顶部导航栏</div>
<div class="content">
<div class="sk">秒杀模块</div>
</div>
<div class="backtop">
<img src="../images/close2.png" alt="">
<a href="javascript:;"></a>
</div>
<script>
const sk = document.querySelector('.sk')
const header = document.querySelector('.header')
window.addEventListener('scroll', function () {
const n = document.documentElement.scrollTop
/* if (n >= sk.offsetTop) {
header.style.top = 0
} else {
header.style.top = '-80px'
} */
header.style.top = n >= sk.offsetTop ? 0 : '-80px'
})
</script>
</body>
</html>
- 总结：
| 属性 | 作用 | 说明 |
|---|---|---|
| scrollLeft|scrollTop | 被卷去的头部和左侧 | 配合页面滚动使用，可读写 |
| clientWidth|clientHeight | 获取元素宽度和高度 | 不包含border，margin,滚动条,用于获取元素大小，只读属性 |
| offsetWidth|offsetHeight | 获得元素宽度和高度 | 包含border、padding,滚动条等，只读 |
| offsetLeft|offsetTop | 获取元素距离自己定位父级元素的左、上距离 | 获取元素位置的时候使用，只读 |
