Web APIs 4：事件流、事件委托

Web APIs 3（事件流、事件委托）

1.事件流

事件流：事件完整执行过程中的流动路径
捕获阶段：从DOM根元素开始去执行对应的事件（从外到里）

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

eg : 分别给document、父级div、子机div都注册同一个事件监听，则从外到内执行

冒泡阶段：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发（当一个元素触发事件后，会依次向上调用所有父级元素的同类型事件）

阻止冒泡：

问题：默认有冒泡模式的存在，容易导致事件影响父级元素
需求：想把事件就限制在当前元素内，需要阻止事件冒泡
前提：阻止事件冒泡要先拿到事件对象
语法：阻止事件流，不仅对冒泡有用，对捕获也有用

事件对象.stopPropagation()

示例：点击son盒子时，事件流被阻止，只会弹出“我是儿子”

html"><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>html" title=javascript>javascript">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可以获得真正触发事件的元素

html"><body><ul><li>第1个孩子</li><li>第2个孩子</li><li>第3个孩子</li><li>第4个孩子</li><li>第5个孩子</li><p>我不需要变色</p></ul><script>html" title=javascript>javascript">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：点击提交默认直接提交，但表单信息有误时不允许提交，就需要使用该阻止方式

html"><body><form action="http://www.baidu.com"><input type="submit" value="提交"></form><script>html" title=javascript>javascript">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事件）
```
html"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script>html" title=javascript>javascript">//等待页面所有资源加载完毕就会执行回调函数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.scrollTopconsole.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="html" title=javascript>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	获取元素距离自己定位父级元素的左、上距离	获取元素位置的时候使用，只读