页面加载事件

事件监听

• 语法：

  元素对象.addEventListener('事件类型',要执行的函数)

• 事件监听三要素：

  1. 事件源：那个dom元素被事件触发了，要获取dom元素

  2. 事件类型：用什么方式触发，比如鼠标单击click、鼠标经过mouseover等

  3. 事件调用的函数：要做什么事

获取事件对象

• 语法：如何获取

  1. 在事件绑定的回调函数的第一个参数就是事件对象

  2. 一般命名为event、ev、e

     元素.addEventListener('click',function(e){
     })

环境对象

环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境

作用：弄清楚this的指向，可以让我们代码更简洁

• 函数的调用方式不同，this指代的对象也不同

• 【谁调用，this就是谁】是判断this指向的粗略规则

• 直接调用函数，其实相当于是window.函数，所以this指代window

事件流和两个阶段说明

• 事件流指的是事件完整执行过程中的流动路径

两种注册事件的区别

• 传统on注册

  1. 同一个对象，后面注册的事件会覆盖前面注册

  2. 直接使用null覆盖就可以实现事件的解绑

  3. 都是冒泡阶段执行的

• 事件监听注册

  1. 语法：addEventListener(事件类型，事件处理函数，是否使用捕获)

  2. 后面注册的事件不会覆盖前面注册的事件

  3. 可以通过第三个参数去确定是在冒泡或者捕获阶段执行

  4. 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)

  5. 匿名函数无法被解绑

页面加载事件

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

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

• 事件名：DOMContentLoaded

• 监听页面DOM加载完毕：

  1. 给document添加DOMContentLoaded事件

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

• scrollLeft和scrollTop

  1. 获取被卷去的大小

  2. 获取元素内容往左、往上滚出去看不到的距离

  3. 这两个值是可读写的

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

• 获取宽高：

  1. 获取元素的可见部分宽高（不包含边框，margin，滚动条等）

  2. clientWidth和clientHeight

元素尺寸于位置--尺寸

• 获取宽高：

  1. 获取元素的自身宽高、包含元素自身设置的宽高、padding、border

  2. offsetWidth和offsetHeight

  3. 获取出来的是数值，方便计算

  4. 注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

• 获取位置：

  1. 获取元素距离自己定位父级元素的左、上距离

  2. offsetLeft和offsetTop 注意是只读属性

  3. element.getBoundingClientRect()

     方法返回元素的大小及其相对于视口的位置