一个鼠标滑轮监听插件MWheel

项目中正好用到了鼠标滑轮监听事件，于是干脆把它整理成一个方便的JavaScript插件以便于日后有用。

MWheel.js

【国内直连ChatGPT 29元起】
国内直连ChatGPT，Plus会员每月29元起，支持最新o1模型探索更多领域，无需注册OpenAI账号。

(function (window, undefined) {
 
  var list = ['up', 'down'],
      _this;

  var handle = function (event) {  
    var delta = 0, e;  

    e = event || window.event;  

    if (e.preventDefault) {
      e.preventDefault();  
    }

    e.returnValue = false;

    if (e.wheelDelta) {
      delta = e.wheelDelta / 120;  
    } else if (e.detail) {
      delta = -e.detail / 3;
    }

    if (delta) {
      if (delta < 0) {
        if (typeof _this[list[0]] === 'function') {
          _this[list[0]].apply(_this, [e]);
        }
      } else {
        if (typeof _this[list[1]] === 'function') {
          _this[list[1]].apply(_this, [e]);
        }
      }           
    }

  };

  var MWheel = function (element) {
    if (element) {
      return new MWheel.fn.init(element);
    } else {
      return null;
    }
  };

  MWheel.fn = MWheel.prototype = {
    constructor: MWheel,
    init: function (element) {
      var i;
        
      _this = this;
      _this.element = element;
        
      for (i = 0; i < list.length; i++) {
        _this[list[i]] = null;  
      }

      _this.element.addEventListener('DOMMouseScroll', handle, false);  
      _this.element.onmousewheel = handle;
      //a.addEventListener("mousewheel", handle, false);
    }
  };

  MWheel.fn.init.prototype = MWheel.fn;

  MWheel.fn.addEventListener = function (action, fn) {
    var i;
    for (i = 0; i < list.length; i++) {
      if (action === list[i]) {
        _this[list[i]] = fn;    
      }
    }

    return _this;
  };

  MWheel.fn.removeEventListener = function () {
    _this.element.removeEventListener('DOMMouseScroll', handle);
    _this.element.onmousewheel = null;      
  };

  window.MWheel = MWheel;
 
})(window);

使用

// 获取要监听滑轮事件的节点
var element = document.getElementById('element');
 
// 创建一个实例
var m = MWheel(element);
 
// 添加鼠标滑轮下划处理函数
m.addEventListener('down', function (event) {
  this.element.innerHTML = '鼠标滑轮下滑。。。';
});
 
// 添加鼠标滑轮上划处理函数
m.addEventListener('up', function (event) {
  this.element.innerHTML = '鼠标滑轮上滑。。。';
});
 
// 移除节点的鼠标滑轮监听事件
m.removeEventListener();

链式操作

var element = document.getElementById('element');
 
MWheel(element)
  .addEventListener('down', function (event) {
    this.element.innerHTML = '鼠标滑轮下滑。。。';
  })
  .addEventListener('up', function (event) {
    this.element.innerHTML = '鼠标滑轮上滑。。。';
  });

可以在处理函数中移除事件监听

var element = document.getElementById('element');
 
var m = MWheel(element);
 
// 添加处理函数链式操作
m.addEventListener('down', function (event) {
 
  this.element.innerHTML = '鼠标滑轮下划';

  // 移除监听
  this.removeEventListener();
});

m.addEventListener('up', function (event) {
 
  this.element.innerHTML = '鼠标滑轮上划';

  // 移除监听
  this.removeEventListener();

});

在addEventListener函数中绑定的方法有个this对象，思考两种情况

• this 指向实例本身，这样有个方便就是直接在方法里就能通过this解除监听
• this 指向被监听的节点，这样就与系统处理一样，但移除监听事件就不太方便。目前采用的是this指向实例本身。