常用的函数

最新推荐文章于 2022-05-31 14:20:47 发布

jeft_hai

最新推荐文章于 2022-05-31 14:20:47 发布

阅读量164

点赞数 1

分类专栏： js 文章标签： js 事件

本文链接：https://blog.csdn.net/jeft_hai/article/details/83904589

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1.事件绑定

function addHandler(elem,event,fn){
    if(elem.addEventListener){
        return elem.addEventListener(event,fn,false);
    }else{
        return elem.attachEvent('on'+event,fn);
    }
}

function removeHandler(elem,event,fn){
    if(elem.removeEventListener){
        return elem.removeEventListener(event,fn,false);
    }else{
        return elem.detachEvent('on'+event,fn);
    }
}

2. drag事件

addHandler(elem,'mousedown',function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    addHandler(document,'mousemove',move);
})
function move(e){}...

addHandler(document,'mouseup',up);

function up(e){
    var e = e || window.event;
    removeHandler(document,'mousemove',move);
    removeHandler(document,'mouseup',up);
}

3.事件委托

addHandler(elem,'click',function(e){
    var  e = e || window.event;
    var target = e.target;
    if(target.nodeName.toLowerCase() == 'li'){
        // ...
    }
}

4.获取实时样式/设置行间样式

function getCurStyle(elem,attr,value){
    if(arguements.length === 2){
        return elem.currentStyle?elem.currentStyle[attr]:window.getComputedStyle(elem,null)[attr];
    }else if(arguements.length === 3){
        elem.style[attr] = value;
    }
}

5.阻止冒泡事件

addHandler(elem,'click',function(e){
    var e = e || window.event;
    // 阻止默认事件
    e.preventDefault();
    // 阻止事件冒泡
    e.stopPropagation();
    e.cancelBubble = true;
})

6.移动动画函数

	function startM(elem,obj,callback,buffer){
	    console.log(elem.timer);
	    clearInterval(elem.timer);
	    elem.timer = setInterval(function(){
	        move(elem,obj,callback);
	    },30)
	}

	function move(elem,obj,callback,buffer){
		var bComplete = true;

		for(var attr in obj){
			var iTarget = obj[attr];

		    var cur = parseFloat(elem.currentStyle?elem.currentStyle[attr]:window.getComputedStyle(elem,null)[attr]);

		    if(attr === 'opacity'){
		        cur = cur.toFixed(2)*100;
		    }
		    var speed = (iTarget - cur)/(buffer||5);
		    speed = speed>0?Math.ceil(speed):Math.floor(speed);

		    if(attr === 'opacity'){
		    	cur == iTarget || (bComplete = false,elem.style[attr] = (cur + speed)/100,elem.style.filter = 'alpha(opacity='+(cur+speed)+')')
			}else{
		    	cur == iTarget || (bComplete = false,elem.style[attr] = cur + speed + 'px')
		    	// cur == iTarget && (bComplete = true)
	    	}
	    }
	    bComplete && (clearInterval(elem.timer),callback && callback())
	}

var jeft = {
		id:function(id){
			return typeof id === 'string'?document.getElementById(id):id;
		},
		class:function(className,oParent){
			return (oParent||document).getElementsByClassName(className);
		},
		tag:function(tagName,oParent){
			return (oParent||document).getElementsByTagName(tagName);
		},
		on:function(elem,event,fn){
			return elem.addEventListener?elem.addEventListener(event,fn):elem.attachEvent(on+'event',fn);
		},
		index:function(elem){
			var oChildren = elem.parentNode.children,i;
			for(i=0;i<oChildren.length;i++){
				if(elem == oChildren[i]) return i;
			}
			return -1;
		},
		pageX: function(element) {
			return element.offsetLeft + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)
		},
		pageY: function(element) {
			return element.offsetTop + (element.offsetParent ? arguments.callee(element.offsetParent) : 0)	
		},
		hasClass:function(elem,className){
			return new RegExp("(^|\\s)"+className + "(\\s|$)").test(elem.className);
		},
		attr:function(elem,attr,value){
			if(arguments.length === 2){
				return elem.getAttribute(attr) ? elem.getAttribute(attr):(element.attributes[attr].nodeValue || elem[attr] || undefined);
			}
			if(arguments.length === 3){
				elem.setAttribute(attr,value);
			}
		}
	}