一、事件流
- 事件流与两个阶段说明
事件流指的是事件完整执行过程中的流动路径。
说明:假设页面里有个div,当触发事件时,会经历两个阶段,分别是捕获阶段、冒泡阶段。
简单来说:捕获阶段是 从父到子 冒泡阶段是 从子到父。
实际工作都是使用事件冒泡为主。
- 事件捕获(了解)
概念:从DOM的根元素开始去执行对应的事件(从外到里),事件捕获需要写对应的代码才能看到效果。
代码:
说明:
addEventListener第三个参数传入true代表是捕获阶段触发(很少使用)。
若传入false代表冒泡阶段触发,默认就是false。
若是用L0事件监听,则只有冒泡阶段,没有捕获。
- 事件冒泡
概念:当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。
简单理解:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件
- 阻止冒泡
目标:能够写出阻止冒泡的代码
语法:
阻止默认行为:
e.preventDefault()
- 解绑事件
on事件方式,直接使用null覆盖偶就可以实现事件的解绑
语法:
例子:
addEventListener方式,必须使用:
removeEventListener(事件类型,事件处理函数,[获取捕获或者冒泡阶段])
二、事件委托
事件委托是利用事件流得特征解决一些开发需求得知识技巧。
优点:减少注册次数,可以提高程序性能。
原理:事件委托其实是利用事件冒泡得特点。给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件。
实现:事件对象.target.tagName(标签名)可以获得真正触发事件的元素。
三、其他事件
- 页面加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件。
事件名:load
监听页面所有资源加载完毕,给window添加load事件:
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件。
当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载。
事件名:DOMContentLoaded
监听页面DOM加载完毕,给document添加DOMContentLoaded事件。
- 元素滚动事件
滚动条在滚动的时候持续触发的事件,监听整个页面滚动,监听某个元素的内部滚动直接给某个元素加即可。
事件名:scroll
开发中,我们经常检测页面滚动的距离,比如页面滚动100像素,就可以显示一个元素,或者固定一个元素。
例如:
- 页面尺寸事件
获取元素的可见部分宽高(不含边框,margin,滚动条等)。
clientWidth 和 clientHeight
四、元素尺寸与位置
获取宽高:offsetWidth 和 offsetHeight
获取元素自身的宽高、包含元素自身设置的宽高、padding、border,如果盒子是隐藏的,获取的结果是0。
获取位置:offsetLeft 和 offsetTop
获取元素距离自己定位父级元素的左、上距离。