function createXHR(){ var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); } else{ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } return xhr; } function ajax(type,url,callback){ var index = url.indexOf("?"); var p = index < 0 ? "" : url.substring(index + 1); //URL中的参数键值对 url = index < 0 ? url : url.substring(0,index); //URL地址 var xhr = createXHR(); xhr.onreadystatechange = function(){ //动态创建 if(xhr.readyState == 4){ if(xhr.status == 200){ var obj = eval(xhr.responseText); callback(obj); } } } if(type.toUpperCase() == "GET"){ url = url + "?" + p; p = null; } xhr.open(type,url,true); if(type.toUpperCase() == "POST"){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); } xhr.send(p); } //简单版封装 // function ajax(m,url,p){ // var xhr = createXHR(); // if(m == "GET"){ // xhr.open(m,url+"?"+p,true) // xhr.send(null); // } // else{ // xhr.open(m,url,true) // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // xhr.send(p); // } // //20秒之后触发该事件 // xhr.onreadystatechange = function(){ // if(xhr.readyState == 4){ // if(xhr.status == 200){ // } // } // } // } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr] == "auto" ? 0 : obj.currentStyle[attr]; } else{ return window.getComputedStyle(obj,false)[attr] == "auto" ? 0 : window.getComputedStyle(obj,false)[attr]; } } function startMove(obj,attrJSON,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var count = 0; var attrJSONCount = 0; for(var attrName in attrJSON){ if(attrName == "opacity"){ var cur = Math.round(getStyle(obj,"opacity") * 100); } else{ var cur = parseInt(getStyle(obj,attrName)); } var speed = (attrJSON[attrName] - cur) / 5; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(attrName == "opacity"){ obj.style.opacity = (cur + speed) / 100; obj.style.filter = "alpha(opacity:"+(cur + speed)+")"; } else{ obj.style[attrName] = cur + speed + "px"; } if(cur == attrJSON[attrName]){ count++; } attrJSONCount++; } if(count == attrJSONCount){ clearInterval(obj.timer); if(fn){ fn(); } } },30); } 阻止事件默认行为 /* 兼容写法: 注意:IE写在下面 */ if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; //阻止默认行为 }//event 为事件对象; //还可以在事件函数里面直接写 return false; 鼠标滚轮事件 function on(dom,type,fn){ //封装事件监听写法 if(dom.attachEvent){//IE的识别方法 return dom.attachEvent(‘on‘+type,fn) }else{ return dom.addEventListener(type,fn)//标准浏览器的写法 } } on(document,‘mousewheel‘,add) on(document,‘DOMMouseScroll‘,add) //兼容火狐的鼠标滚轮写法 function add(e){ //滚轮事件对象里面的向上向下写法(也是兼容火狐 var event = window.event||e; var num = event.wheelDelta||event.detail; if(num == 120||num == -3){ alert("向上") }else{ alert("向下") } } IE事件监听: 1.添加时间监听 (事件名中要加on) dom.attachEvent("onclick",fn); dom.attachEvent("onclick",fn2); 事件监听也可以追加,只是执行顺序是反序; 但是如果传统事件声明方式 如 dom.onclick = fn;不管在上还是在下都是先执行传统的事件; 2.移除事件: dom.detachEvent("onclick",fn) 谷歌和火狐: 1.添加事件监听 dom.addEventlistener("click",fn,false) //默认为false 也就是冒泡 可以追加事件绑定,不管有没有传统事件声明方式,统一按照从上到下的执行顺序! 2.移除事件: dom.removeEventlistener("click"fn)//移除时后面的函数必须和被移除的函数是相同的! 兼容封装: //功能:事件监听器 dom:事件目标 type:时间类型(click) fn:事件处理程序 function on(dom,type,fn){ if(dom.attachEvent){ dom.attachEvent(‘on‘+type,fn) }else{ dom.addEvevtListener(type,fn) } } on(dom,‘click‘,function(){ alert("nihao") }) 获取event对象的兼容写法 var ev=e||window.event; 获取事件目标的兼容写法 var t=ev.target||ev.srcElement; 取消事件默认动作的兼容写法 /* if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue=false; } */ 滚动条距顶部的距离的兼容写法 document.body.scrollTop||document.documentElement.scrollTop 滚动条距离顶部的距离 锄禾(0022681A2569对话) 09:51:00 事件监听鼠标滚动的兼容写法 /* function add(){alert("hi")}; on(document,"DOMMouseScroll",add); on(document,"mousewheel",add); */ function getClientHeight(){ var result = 0; if(window.innerHeight){ result = window.innerHeight; } else{ //检查一下当前浏览器的模式 //标准模式:CSS1Compat 怪癖模式:"BackCompat" if(document.compatMode == "CSS1Compat"){ //标准模式 result = document.documentElement.clientHeight; } else{ result = document.body.clientHeight; } } return result; } function getClientWidth(){ var result = 0; if(window.innerWidth){ result = window.innerWidth; } else{ //检查一下当前浏览器的模式 //标准模式:CSS1Compat 怪癖模式:"BackCompat" if(document.compatMode == "CSS1Compat"){ //标准模式 result = document.documentElement.clientWidth; } else{ result = document.body.clientWidth; } } return result; } 有两种方法: e = e || window.event; // 获取某个dom节点的left,top值 var left = parseFloat(window.getComputedStyle ? getComputedStyle(dom).left : dom.currentStyle.left); var top = parseFloat(window.getComputedStyle ? getComputedStyle(dom).top : dom.currentStyle.top); //e为事件对象; //封装函数获取某个dom节点的属性值 function getStyle(dom,propertyName){ if(dom.currentStyle){ return dom.currentStyle[propertyName]; }else{ return getComputedStyle(dom,null)[propertyName]; } } //var w = window.getComputedStyle(box,null).width; //标准 //var h = box.currentStyle["height"]; //IE8及以下的处理方式 //var w = getStyle(box,"width"); if(event.stopPropagation){ event.stopPropagation(); //取消事件冒泡 }else{ event.cancelBubble = true; //cancelBubble } function jsonp(url){ var script = document.createElement("script"); script.src = url; document.body.appendChild(script); } e = e || window.event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; //pageX,pageY的兼容写法 e.pageX = e.pageX || e.clientX + scrollLeft; e.pageY = e.pageY || e.clientY + scrollTop; //e为事件对象