DOM入门（三）

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 注意是只读属性

1. offsetWidth和offsetHeight是得到元素什么的宽高？

•  内容 + padding + border

2. offsetTop和offsetLeft 得到位置以谁为准？

•  带有定位的父级
•  如果都没有则以 文档左上角 为准

client家族

 获取宽高：

•  获取元素的可见部分宽高（不包含边框，滚动条等）
•  clientWidth和clientHeight

 获取位置：

•  获取左边框和上边框宽度
•  clientLeft和clientTop 注意是只读属性

会在窗口尺寸改变的时候触发事件：  resize

 

 

1. offset家族

•  获取元素自身大小：包括自身设置的宽高、padding、border
•  获取元素距离定位父级的左和上距离 只读属性

2. client家族

•  获取元素可见区域的大小
•  获取元素左、上边框距离 只读属性

3. scroll家族

•  获取元素内容的总大小
•  获取元素向左向上滚出去看不见的距离 可读写属性