滚轮事件及优化

滚轮事件

由于浏览器的兼容性导致不同浏览器的滚轮事件也有所差异，下面介绍下滚轮事件的兼容方案。

滚轮事件

• mousewhell---用于Chrome和IE浏览器
• DOMMouseScroll---用于Firefox浏览器，而且只能使用addEventListener监听

Event对象(获取滚轮滚动方向)

• wheelDelta---用于Chrome和IE浏览器，120表示向上滚动，-120表示向下滚动
• detail---用于Firefox浏览器，3表示向下滚动，-3表示向上滚动

滚轮事件兼容性使用案例

滚轮事件优化

节流throttle

• 节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。
• 应用：滚轮事件

• 节流函数主要有两种实现方法：

  • 时间戳的方式

• 定时器方式

防抖debounce

• 防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。
• 应用：input的change事件（搜索）
• 防抖函数实现方法：

---

说明：笔者只是个在前端道路上默默摸索的初学者，若本文涉及错误请及时给予纠正，如果本文对您有帮助的话，请点赞收藏关注，你的认可是我前进的动力，谢谢！