事件流

事件流与两个阶段说明

两个阶段：

• 捕获阶段(由大到小)
• 冒泡阶段(由小到大)

事件捕获

从 DOM 的根元素开始去执行对应的事件 (从外到里)

1
2
3
4

addEventListener('click', function (e) {}, true)
// addEventListener第三个参数传入 true 代表是捕获阶段触发（很少使用）
// 若传入false代表冒泡阶段触发，默认就是false
// 若是用L0 事件监听，则只有冒泡阶段，没有捕获

事件冒泡

当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡。

阻止冒泡

• 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
• 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
• 前提：阻止事件冒泡需要拿到事件对象
• 语法：事件对象.stopPropagation()

解绑事件

on 事件方式，直接使用null覆盖就可以实现事件的解绑

1
2
3
4
5
6

// 绑定事件
btn.onclick = function () {
  console.log('点击了')
}
// 解绑事件
btn.onclick = null

addEventListener 方式，必须使用：removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])

1
2
3
4

// 绑定事件
btn.addEventListener('click', fn)
// 解绑事件
btn.removeEventListener('click', fn)

注意事项：匿名函数无法解绑

事件委托

事件委托是利用事件流的特征解决一些开发需求的知识技巧

• 优点：减少注册次数，可以提高程序性能
• 原理：事件委托其实是利用事件冒泡的特点，给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件。
• 实现：事件对象.target.tagName 可以获得真正触发事件的元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 获取元素
const ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
  // 阻止冒泡
  e.stopPropagation()
  // 获取真正触发事件的元素
  // console.log(e.target.tagName)
  if (e.target.tagName === 'LI') {
    e.target.style.color = 'red'
  }
})

其他事件

目标：掌握新的事件，做更强交互

页面加载事件

页面滚动事件

• 滚动条在滚动的时候持续触发的事件
• 为什么要学：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
• 事件名：scroll
• 监听某个元素的内部滚动直接给某个元素加即可

scrollLeft 和 scrollTop（属性）：

• 获取被卷去的大小
• 获取元素内容往左、往上滚出去看不到的距离
• 这两个值是可读写的

注意事项：document.documentElement HTML 文档返回对象为HTML元素

scrollTo(x, y)方法可把内容滚动到指定的坐标

页面尺寸事件

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

获取宽高：

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

1
2
3
4

window.addEventListener('resize', function (e) {
  let w = document.documentElement.clientWidth
  console.log(w)
})

元素尺寸与位置

使用场景：

• 前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
• 简单说，就是通过 js 的方式，得到元素在页面中的位置
• 这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了

使用方式：

• 获取宽高：
  • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
  • offsetWidth 和 offsetHeight
  • 获取出来的是数值,方便计算
  • 注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
• 获取位置：
  • 获取元素距离自己定位父级元素的左、上距离
  • offsetLeft 和 offsetTop 注意是只读属性