JS DAY3
一·事件流
1.事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径
说明:假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段
简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父
实际工作以冒泡为主
2.事件捕获
事件捕获概念:
从DOM的根元素开始去执行对应的事件(从外到里)
事件捕获需要写对应代码才能看到效果
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
说明:
>addEventListener第三个参数传入 true 代表是捕获阶段触发(很少使用)
>若传入false代表冒泡阶段触发，默认就是false
3.事件冒泡
概念:
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
简单理解:当一个元素触发事件后，会依次向上调用所有父级元素的同名事件
事件冒泡是默认存在的
L2事件监听第三个参数是 false，或者默认都是冒泡
const father = document.querySelector('.father')
const son = document.querySelector('.son')
document.addEventListener('click',function(){alert('我是爷爷')
})
fa.addEventListener('click',function(){alert('我是爸爸")
})
son.addEventlistener('click',function(){alert('我是儿子')
})
4.阻止冒泡
问题:因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
需求:若想把事件就限制在当前元素内，就需要阻止事件冒泡
前提:阻止事件冒泡需要拿到事件对象
事件对象.stopPropagation()注意:此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
5.解绑事件
L0直接等于null
例如：
btn.onclick =function(){
alert('点击了')
//L0 事件移除解绑
btn.onclick =null
}L2使用removeEventListener
addEventListener方式，必须用:removeEventListener(事件类型,事件处理函数，[获取捕获或者冒泡阶段])
例如:
function fn(){
alert('点击了')
}
// 绑定事件
btn.addEventListener('click',fn)
// 解绑事件
btn.removeEventListener('click',fn)
注意:匿名函数无法被解绑
鼠标经过事件:
>mouseover和 mouseout 会有冒泡效果
>mouseenter和mouseleave 没有冒泡效果(推荐)
两种注册事件的区别
传统on注册(L0)
>同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
>直接使用null覆盖偶就可以实现事件的解绑
>都是冒泡阶段执行的
事件监听注册(L2)
>语法: addEventlistener(事件类型，事件处理函数，是否使用捕获)
>后面注册的事件不会覆盖前面注册的事件(同一个事件)
>可以通过第三个参数去确定是在冒泡或者捕获阶段执行
>必须使用removeEventListener(事件类型,事件处理函数，获取捕获或者冒泡阶段)
>匿名函数无法被解绑
- 事件覆盖情况：
L0事件采用传统的 on<事件类型> 注册方式，对于同一个对象，如果后面注册了相同类型的事件，它会覆盖前面注册的事件。例如，一个元素先后注册两个 onclick 事件，只有后面的会被触发。L2事件使用 addEventListener 方法注册，后面注册的同类型事件不会覆盖前面的，可在同一元素上注册多个同类型事件，它们都会被触发。
- 事件解绑方式：L0事件直接使用 null 赋值即可解绑，如 对象.onclick = null 。L2事件解绑需要使用 removeEventListener 方法，并传入相应的事件类型、事件处理函数以及捕获或冒泡阶段（若绑定时指定了的话）。需注意，使用匿名函数作为事件处理函数无法解绑。
- 执行阶段：L0事件注册的事件都在冒泡阶段执行。L2事件注册时可通过第三个参数指定事件在捕获阶段还是冒泡阶段执行，不指定或传入 false ，事件默认在冒泡阶段执行；传入 true ，则在捕获阶段执行。
二·事件委托
1.事件委托是利用事件流的特征解决一些开发需求的知识技巧
>优点:减少注册次数，可以提高程序性能
>原理:事件委托其实是利用事件冒泡的特点，
>给父元素注册事件，当我们触发子元素的时候，会冒泡到父元索身上，从而触发父元素的事件
实现:事件对象.target.tagName 可以获得真正触发事件的元素
如此，ul中只有li元素点击之后会变红，其他都不变
阻止冒泡
我们某些情况下需要阻止默认行为的发生，比如 阻止链接的跳转，表单域跳转
语法:
e.preventDefault()<form action="http://www.baidu.com">
<input type="submit" value="提交"
</form>
<script>
const form = document.querySelector('form')
form.addEventListener('click',function(e){
// 限止表单默认提交行为
e.preventDefault()
})三·其他事件
1.页面加载事件
1.1>加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
事件名:load
监听页面所有资源加载完毕:
给 window 添加 load 事件
//页面加载事件
window.addEventListener('load'，function(){
// 执行的操作
})1.2>当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
事件名:DOMContentLoaded
监听页面DOM加载完毕:
给document添加 DOMContentLoaded 事件
document.addEventListener('DoMcontentLoaded',function(){
// 执行的操作
}) 2. 页面滚动事件
1.页面滚动事件
滚动条在滚动的时候持续触发的事件
事件名:scroll
监听整个页面滚动:
// 页面滚动事件
window.addEventListener('scroll',function(){
// 执行的操作
})>给window或document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
2.获取位置
scrollLeft和scrollTop(属性)
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
div.addEventListener('scroll',function(){
console.log(this.scrollTop)
})
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
//页面滚动事件
window.addEventListener('scroll',function(){
//document.documentElement 是html元素获取方式
const n= document.documentElement.scrollTop
console.log(n)
})注意事项
document.documentElement HTML 文档返回对象为HTML元素
<html lang="en">
▶ chead>...</head>
▶<body>...</body>
</htm1>
3.页面尺寸事件
1.页面尺寸事件
会在窗口尺寸改变的时候触发事件:
>resize
window.addEventListener('resize',function(){
// 执行的代码
})检测屏幕宽度:
window.addEventListener('resize',function(){let w= document.documentElement.clientWidthconsole.log(w)
}）2. 获取元素宽高
获取宽高:
> 获取元素的可见部分宽高(不包含边框，margin，滚动条等)
> clientwidth和clientHeight
四·元素尺寸与位置
获取宽高:
>获取元素的自身宽高、包含元素自身设置的宽高、padding、border
>offsetWidth和offsetHeight
>获取出来的是数值,方便计算
>注意:获取的是可视宽高，如果盒子是隐藏的,获取的结果是0
获取位置:
>获取元素距离自己定位父级元素的左、上距离
>offsetLeft和offsetTop 注意是只读属性