JavaScript 经典实例盘点（收藏向）

一、跨 浏 览 器 事 件

跨浏览器添加事件

//跨浏览器添加事件
function addEvent(obj,type,fn){
   
    if(obj.addEventListener){
   
        obj.addEventListener(type,fn,false);
    }else if(obj.attachEvent){
   //IE
        obj.attchEvent('on'+type,fn);
    }
}

跨浏览器移除事件

//跨浏览器移除事件
function removeEvent(obj,type,fn){
   
    if(obj.removeEventListener){
   
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent){
   //兼容IE
        obj.detachEvent('on'+type,fn);
    }
}

跨浏览器阻止默认行为

//跨浏览器阻止默认行为
function preDef(ev){
   
    var e = ev || window.event;
    if(e.preventDefault){
   
        e.preventDefault();
    }else{
   
        e.returnValue =false;
    }
}

跨浏览器获取目标对象

//跨浏览器获取目标对象
function getTarget(ev){
   
    if(ev.target){
   //w3c
        return ev.target;
    }else if(window.event.srcElement){
   //IE
        return window.event.srcElement;
    }
}   

跨浏览器获取滚动条位置

//跨浏览器获取滚动条位置，sp == scroll position
function getSP(){
   
    return{
   
        top: document.documentElement.scrollTop || document.body.scrollTop,
        left : document.documentElement.scrollLeft || document.body.scrollLeft;
    }
}

跨浏览器获取可视窗口大小

 //跨浏览器获取可视窗口大小
function  getWindow () {
   
  if(typeof window.innerWidth !='undefined') {
   
      return{
   
          width : window.innerWidth,
          height : window.innerHeight
      }

  } else{
   
      return {
   
          width : document.documentElement.clientWidth,
          height : document.documentElement.clientHeight
      }
  }
},

二、js 对 象 冒 充

<script type = 'text/javascript'>
    function Person(name , age){
   
        this.name = name ;
        this.age = age ;
        this.say = function (){
   
            return "name : "+ this.name + " age: "+this.age ;
        } ;
    }
 
    var o = new Object() ;//可以简化为Object()
    Person.call(o , "zhangsan" , 20) ;
    console.log(o.say() );//name : zhangsan age: 20 
</script>

三、js异步加载和同步加载

异步加载

异步加载也叫非阻塞模式加载，浏览器在下载的同时，同时还会执行后续的页面处理。

在script标签内，用js创建一个script元素并插入到document中，这种就是异步加载js文件了：

(function() {
        
    var s = document.createElement('script');    
    s.type = 'text/javascript';     
    s.async = true;    
    s.src = 'http://yourdomain.com/script.js';    
    var x = document.getElementsByTagName('script')[0];    
     x.parentNode