js事件委托，其他事件与元素尺寸位置

一.事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧
优点：减少注册次数，可以提高程序性能
原理：事件委托其实是利用事件冒泡的特点。
给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
实现：事件对象.target. tagName 可以获得真正触发事件的元素
ul.addEventListener(‘click’, function(){}) 执行父级点击事件

例子：

注意点：
事件委托的好处是减少注册次数，提高了程序性能
事件委托是委托给父元素
如何找到真正触发的元素：事件对象.target.tagName

二.其他事件

2.1.页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
应用场景：
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load
监听页面所有资源加载完毕：给 window 添加 load 事件

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded
监听页面DOM加载完毕：给 document 添加 DOMContentLoaded 事件

区别：
load 事件：监听整个页面资源，给window加
DOMContentLoaded事件：给document加，无需等待样式表、图像等完全加载

2.2.页面滚动事件

滚动条在滚动的时候持续触发的事件
应用场景：
很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面滚动：给 window 或 document 添加 scroll 事件

监听某个元素的内部滚动直接给某个元素加即可

2.2.1.页面滚动事件-获取位置

属性：scrollLeft和scrollTop
获取被卷去的大小，即获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离

例子：

2.2.2. 页面滚动事件-获取位置

在开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

document.documentElement HTML 文档返回对象为HTML元素

2.2.3. 页面滚动事件-滚动到指定的坐标

scrollTo() 方法可把内容滚动到指定的坐标
语法：
元素.scrollTo(x, y)
例如：

2.3.页面尺寸事件

会在窗口尺寸改变的时候触发事件
事件名：resize

检测屏幕宽度：

2.3.1 页面尺寸事件-获取元素宽高

获取元素的可见部分宽高,包含内容与内边距（不包含边框，margin，滚动条等）
属性：clientWidth和clientHeight

三.元素尺寸与位置

获取元素的自身宽高、包含元素自身设置的宽高、padding、border
属性：offsetWidth和offsetHeight
获取出来的是数值,方便计算
注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

获取位置：
属性：offsetLeft和offsetTop
获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性

offsetTop和offsetLeft 得到位置以谁为准？
带有定位的父级
如果都没有则以文档左上角为准

获取位置：
element.getBoundingClientRect()
返回元素的大小及其相对于视口的位置

总结：