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()
返回元素的大小及其相对于视口的位置
总结: