滚轮事件及优化

滚轮事件

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

滚轮事件

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

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

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

滚轮事件兼容性使用案例

<script>
        var box = document.querySelector('#box');

        //chrome ie
        box.addEventListener('mousewheel', scrollMove);
        //firefox
        box.addEventListener('DOMMouseScroll', scrollMove);

        // 滚轮滚动函数
        function scrollMove(event) {
            //判断是往上滚动还是往下滚动
            var tag = null;  //标记滚轮往上滚还是往下滚
            if (event.wheelDelta) {  //chrome ie
                if (event.wheelDelta > 0) {
                    tag = 'up';
                } else {
                    tag = 'down';
                }
            } else if (event.detail) { //firefox
                if (event.detail > 0) {
                    tag = 'down';
                } else {
                    tag = 'up';
                }
            }
            //根据滚动方向，实现相应的操作
            if (tag === 'up') {
                box.style.width = box.offsetWidth + 5 +'px';
                box.style.height = box.offsetHeight + 5 +'px';
            } else if (tag === 'down') {
                box.style.width = box.offsetWidth - 5 +'px';
                box.style.height = box.offsetHeight - 5 +'px';
            }
        }
    </script>

滚轮事件优化

节流throttle

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

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

  • 时间戳的方式

<script>
    function throttle(fn, time) {
      let lastTime = 0;
      return function() {
        const nowTime = Date.now();
        // 如果时间差小于time，就不执行
        if (nowTime - lastTime < time) return;
        fn.apply(this, arguments);
        lastTime = nowTime;
      }
    }
    function handle(event){
      console.log('事件触发了~');
      console.log(this);
      console.log(event);
    }
 window.addEventListener('scroll', throttle(handle, 1000));     
</script>

• 定时器方式

<script>
    function throttle(fn,time){
        let timer = null;
        return function(){
            if(!timer){
                timer = setTimeout(function(){
                    fn.apply(this,arguments);
                    timer = null;
                },time)
            }
        }
    }
    function handle(event){
      console.log('事件触发了~');
      console.log(this);
      console.log(event);
    }
 window.addEventListener('scroll', throttle(handle, 1000));        
</script>

防抖debounce

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

<script>
    function debounce(fn, time) {
      let timer = null;
      return function debounced() {
        // oninput事件绑定的回调函数实际上是debounced
        // debounced函数有this，所以this指向被绑定的DOM元素
        const that = this;
        // 存储参数（event）
        const args = arguments;
        // 清除定时器，清除上一次调用的函数
        clearTimeout(timer);
        timer = setTimeout(function () {
          // 直接调用，this指向window 
          // 需求：将fn的this指向dom元素
          // 调用函数没有传参，没有event
          fn.apply(that, args);
        }, time)
      }
    }
    
    let input = document.querySelector('input');
    function handleChange(event) {
      console.log('事件触发了~');
      console.log(this.value);
      console.log(event);
    }
    // 绑定输入框输入事件
    input.oninput = debounce(handleChange, 1000);
    /*oninput事件在 <input> 或 <textarea> 元素的值发生改变时触发,该事件类似于onchange事件。
    不同之处在于oninput事件在元素值发生变化是立即触发， onchange在元素失去焦点时触发。
    */
</script>

---

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