事件监听
-
语法:
元素对象.addEventListener('事件类型',要执行的函数)
-
事件监听三要素:
-
事件源:那个dom元素被事件触发了,要获取dom元素
-
事件类型:用什么方式触发,比如鼠标单击click、鼠标经过mouseover等
-
事件调用的函数:要做什么事
-
获取事件对象
-
语法:如何获取
-
在事件绑定的回调函数的第一个参数就是事件对象
-
一般命名为event、ev、e
元素.addEventListener('click',function(e){ })
-
环境对象
环境对象:指的是函数内部特殊的变量this,它代表着当前函数运行时所处的环境
作用:弄清楚this的指向,可以让我们代码更简洁
-
函数的调用方式不同,this指代的对象也不同
-
【谁调用,this就是谁】是判断this指向的粗略规则
-
直接调用函数,其实相当于是window.函数,所以this指代window
事件流和两个阶段说明
-
事件流指的是事件完整执行过程中的流动路径
两种注册事件的区别
-
传统on注册
-
同一个对象,后面注册的事件会覆盖前面注册
-
直接使用null覆盖就可以实现事件的解绑
-
都是冒泡阶段执行的
-
-
事件监听注册
-
语法:addEventListener(事件类型,事件处理函数,是否使用捕获)
-
后面注册的事件不会覆盖前面注册的事件
-
可以通过第三个参数去确定是在冒泡或者捕获阶段执行
-
必须使用removeEventListener(事件类型,事件处理函数,获取捕获或者冒泡阶段)
-
匿名函数无法被解绑
-
页面加载事件
-
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
-
当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
-
事件名:DOMContentLoaded
-
监听页面DOM加载完毕:
-
给document添加DOMContentLoaded事件
-
页面滚动事件--获取位置
-
scrollLeft和scrollTop
-
获取被卷去的大小
-
获取元素内容往左、往上滚出去看不到的距离
-
这两个值是可读写的
-
页面尺寸事件--获取元素宽高
-
获取宽高:
-
获取元素的可见部分宽高(不包含边框,margin,滚动条等)
-
clientWidth和clientHeight
-
元素尺寸于位置--尺寸
-
获取宽高:
-
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
-
offsetWidth和offsetHeight
-
获取出来的是数值,方便计算
-
注意:获取的是可视宽高,如果盒子是隐藏的,获取的结果是0
-
-
获取位置:
-
获取元素距离自己定位父级元素的左、上距离
-
offsetLeft和offsetTop 注意是只读属性
-
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置
-