1、获取事件对象
事件对象是什么
- 也是个对象,这个对象里有事件触发时的相关信息
- 例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
如何获取
- 在事件绑定的回调函数的第一个参数就是事件对象 一般命名为event、ev、e
常见事件对象属性
- type 获取当前的事件类型
- clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置
key
- 用户按下的键盘键的值
- 现在不提倡使用keyCode
2、事件流和两个阶段说明
- 事件流指的是事件完整执行过程中的流动路径
- 说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段
- 简单来说:捕获阶段是 从父到子 冒泡阶段是从子到父
事件冒泡概念:
- 当一个元素触发事件后,会依次向上调用所有父级元素的同名事件(同时使用点击事件‘click’,点击儿子元素,会触发父亲和爷爷元素)
- 事件冒泡是默认存在的
事件捕获概念:
- 从DOM的根元素开始去执行对应的事件 (从外到里)(从最高级元素开始到最里面元素,与冒泡事件相反)
- 事件捕获需要写对应代码才能看到效果
- addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)
- 若传入false代表冒泡阶段触发,默认就是false
- 若是用 L0 事件监听,则只有冒泡阶段,没有捕获
阻止事件流动
- 此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效
鼠标经过事件:
- mouseover 和 mouseout 会有冒泡效果
- mouseenter 和 mouseleave 没有冒泡效果(推荐)
阻止默认行为,比如链接点击不跳转,表单域的不提交
3、两种注册事件的区别:
传统on注册(L0)
- 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
- 直接使用null覆盖偶就可以实现事件的解绑
- 都是冒泡阶段执行的
事件监听注册(L2)
- 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
- 后面注册的事件不会覆盖前面注册的事件(同一个事件)
- 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
- 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
- 匿名函数无法被解绑
事件委托
- 优点:给父级元素加事件(可以提高性能)
- 原理:事件委托其实是利用事件冒泡的特点, 给父元素添加事件,子元素可以触发
- 实现:事件对象.target 可以获得真正触发事件的元素(e.target)
事件委托是委托给了谁?
- 父元素
如何找到真正触发的元素?
e.target 事件对象.target
4、滚动事件和加载事件
1.1 滚动事件
- 当页面进行滚动时触发的事件
- 为什么要学?
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理, 比如固定导航栏,比如返回顶部
- 事件名:scroll
- 监听整个页面滚动:
- 给 window 或 document 添加 scroll 事件
- 监听某个元素的内部滚动直接给某个元素加即可
1.2 加载事件
- 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
- 为什么要学?
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中,这时候直接找 dom 元素找不到
- 事件名:load
- 监听页面所有资源加载完毕:
- 给 window 添加 load 事件
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
- 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载
- 事件名:DOMContentLoaded
- 监听页面DOM加载完毕:
- 给 document 添加 DOMContentLoaded 事件
1. 页面滚动事件如何添加?
- scroll
- 监听整个页面滚动给 window 或 document 加
2. 加载事件有哪两个?如何添加?
- load 事件 ----监听整个页面资源给 window 加
- DOMContentLoaded ----给 document 加,当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像等完全加载
5、三大家族
scroll家族
获取宽高:
- 获取元素的内容总宽高(不包含滚动条)返回值不带单位
- scrollWidth和scrollHeight
获取位置:
- 获取元素内容往左、往上滚出去看不到的距离
- scrollLeft和scrollTop
- 这两个属性是可以修改的
offset家族
2.2 offset家族
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
获取位置:
- 获取元素距离自己定位父级元素的左、上距离(一般页面不做定位)
- offsetLeft和offsetTop 注意是只读属性
![](https://i-blog.csdnimg.cn/blog_migrate/e2578a878e6210baa5ee46341f72b14b.png)
1. offsetWidth和offsetHeight是得到元素什么的宽高?
- 内容 + padding + border
2. offsetTop和offsetLeft 得到位置以谁为准?
- 带有定位的父级
- 如果都没有则以 文档左上角 为准
client家族
获取宽高:
- 获取元素的可见部分宽高(不包含边框,滚动条等)
- clientWidth和clientHeight
获取位置:
- 获取左边框和上边框宽度
- clientLeft和clientTop 注意是只读属性
会在窗口尺寸改变的时候触发事件:
resize
1. offset家族
- 获取元素自身大小:包括自身设置的宽高、padding、border
- 获取元素距离定位父级的左和上距离 只读属性
2. client家族
- 获取元素可见区域的大小
- 获取元素左、上边框距离 只读属性
3. scroll家族
- 获取元素内容的总大小
- 获取元素向左向上滚出去看不见的距离 可读写属性