在上一小节中我们使用jquery.fn.extend为jquery新增了两个新的方法，这一节来制作滚轮事件的插件。
1.准备好已经做好兼容的滚轮事件函数：
function mousewheel(obj,fnWheel){ if (obj.addEventListener){ obj.addEventListener("DOMMouseScroll",fn,false); } if (obj.attachEvent){ obj.attachEvent("onmousewheel",fn); }; obj.onmousewheel=fn; function fn(ev){ var oEvent=ev||event; var down=true; if (oEvent.wheelDelta){ down=oEvent.wheelDelta<0; } else{ down=oEvent.detail>0; }; fnWheel(down,oEvent); if (oEvent.preventDefault){ oEvent.preventDefault(); }; return false; }; };
2.在原函数里绑定事件的对象是作为参数传过去的，在extend里可以用$(this)代替调用该方法的对象,但因为要调用的原生的方法，所以需要转化一下：
$.fn.extend({ mousewheel:function (fnWheel){ if ($(this).get(0).addEventListener){ $(this).get(0).addEventListener("DOMMouseScroll",fn,false); } if ($(this).get(0).attachEvent){ $(this).get(0).attachEvent("onmousewheel",fn); }; $(this).get(0).onmousewheel=fn; function fn(ev){ var oEvent=ev||window.event; var down=true; if (oEvent.wheelDelta){ down=oEvent.wheelDelta<0; } else{ down=oEvent.detail>0; }; fnWheel(oEvent,down); if (oEvent.preventDefault){ oEvent.preventDefault(); }; return false; }; } });
3.现在这个插件还有一个问题，就是如果在前台调用this的时候指向不对，原因就在于回调函数fnWheel是window调用的，可以使用call方法改变this的指向：
最终代码：
$.fn.extend({ mousewheel:function (fnWheel){ if ($(this).get(0).addEventListener){ $(this).get(0).addEventListener("DOMMouseScroll",fn,false); } if ($(this).get(0).attachEvent){ $(this).get(0).attachEvent("onmousewheel",fn); }; $(this).get(0).onmousewheel=fn; function fn(ev){ var oEvent=ev||window.event; var down=true; if (oEvent.wheelDelta){ down=oEvent.wheelDelta<0; } else{ down=oEvent.detail>0; }; fnWheel.call(this,oEvent,down); if (oEvent.preventDefault){ oEvent.preventDefault(); }; return false; }; } });
在前台调用该插件例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #div1{ height: 500px; width: 500px; background-color: #ccc; } </style> <script type="text/javascript" src="jquery-1.11.0.js"></script> <script type="text/javascript" src="extend-mouseWheel.js"></script> <script type="text/javascript"> $(function (){ $("#div1").mousewheel(function (event,down){ alert(this.tagName);//弹出DIV }); }); </script> </head> <body> <div id="div1"></div> </body> </html>