自定义事件

/*

 * 
 * 封装自定义移动端事件库
 * */

;(function (window,undefind) {
    
    var query = function (selector) {
        return query.fn.init(selector);
    }   
    query.fn = query.prototype = {
        //初始化方法(就是获得当前query对象的方法)
        init : function (selector) {
            if (typeof selector == "string") {
                //通过传入的选择器获取页面元素,并且绑定在当前对象中
                this.element = document.querySelector(selector);
                console.log(this);
                return this;    
            }
        },
        //单击事件
        tap:function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            
            //记录按下和抬起的时间
            var startTime,endTime;
            
            //事件触发函数
            function touchFn(e) {
                switch (e.type){
                    case "touchstart":
                    startTime = new Date().getTime();
                        break;
                    case "touchend":
                    endTime = new Date().getTime();
                    //抬起的时候触发
                    if ((endTime-startTime)<500) {
                        handler();
                    }
                    break;
                }
            }
//          handler("大家好");
        },  
        
        //长按事件
        longTap:function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            
            var timerId;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        timerId = setTimeout(function () {
                            handler();
                        },500)
                        break;
                    case "touchend":
                        clearTimeout(timerId);
                        break;
                }
            }
        },
        //双击事件
        doubleTap:function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            var startTime = 0,baseTime = 0,intervalTime = 0;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        startTime = new Date().getTime(); 
                        break;
                    case "touchend":
                        intervalTime = startTime - baseTime;
                        baseTime = startTime;
                        if (intervalTime < 300) {
                            handler();
                        }
                        break;
                }
            }
        },
        
        //上滑事件
        slideUp : function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            this.element.addEventListener("touchmove",touchFn);
            var startX = 0,startY = 0,endX = 0,endY = 0;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        startX = e.targetTouches[0].pageX;
                        startY = e.targetTouches[0].pageY;
                        break;
                    case "touchmove":
                        endX = e.targetTouches[0].pageX;
                        endY = e.targetTouches[0].pageY;
                        if ((endY - startY < -20)&&(Math.abs(endX - startX)<50)) {
                            handler();
                        }
                        break;
                }
            }
        },
        //下滑事件
        slideDown : function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            this.element.addEventListener("touchmove",touchFn);
            var startX = 0,startY = 0,endX = 0,endY = 0;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        startX = e.targetTouches[0].pageX;
                        startY = e.targetTouches[0].pageY;
                        break;
                    case "touchmove":
                        endX = e.targetTouches[0].pageX;
                        endY = e.targetTouches[0].pageY;
                        if ((endY - startY > 30)&&(Math.abs(endX - startX)<50)) {
                            handler();
                        }
                        break;
                }
            }
        },
        //右滑事件
        slideRight : function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            this.element.addEventListener("touchmove",touchFn);
            var startX = 0,startY = 0,endX = 0,endY = 0;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        startX = e.targetTouches[0].pageX;
                        startY = e.targetTouches[0].pageY;
                        break;
                    case "touchmove":
                        endX = e.targetTouches[0].pageX;
                        endY = e.targetTouches[0].pageY;
                        if ((endX - startY > 30)&&(Math.abs(endY - startY)<50)) {
                            handler();
                        }
                        break;
                }
            }
        },
        //左滑事件
        slideLeft : function (handler) {
            this.element.addEventListener("touchstart",touchFn);
            this.element.addEventListener("touchend",touchFn);
            this.element.addEventListener("touchmove",touchFn);
            var startX = 0,startY = 0,endX = 0,endY = 0;
            function touchFn (e) {
                switch (e.type){
                    case "touchstart":
                        startX = e.targetTouches[0].pageX;
                        startY = e.targetTouches[0].pageY;
                        break;
                    case "touchmove":
                        endX = e.targetTouches[0].pageX;
                        endY = e.targetTouches[0].pageY;
                        if ((endX - startY < -30)&&(Math.abs(endY - startY)<50)) {
                            handler();
                        }
                        break;
                }
            }
        },
        
        
    }
    query.fn.init.prototype = query.fn;
    window.$ = window.query = query;

} )(window,undefined);

你可能感兴趣的:(自定义事件)