jquery插件的使用2-jquery.fn.extend

浏览数：27 / 时间：2015年06月09日

在上一小节中我们使用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>