JavaScript 经典实例收集整理-技术圈

（给前端大学加星标，提升前端技能.）

作者：trigkit4
https://segmentfault.com/a/1190000002559158

跨浏览器事件

跨浏览器添加事件

//跨浏览器添加事件    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 对象冒充

js 异步加载和同步加载

异步加载也叫非阻塞模式加载，浏览器在下载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.insertBefore(s, x);})();

同步加载

平常默认用的都是同步加载。如：

同步模式又称阻塞模式，会阻止流览器的后续处理。停止了后续的文件的解析，执行，如图像的渲染。浏览器之所以会采用同步模式，是因为加载的js文件中有对dom的操作，重定向，输出document等默认行为，所以同步才是最安全的。
通常会把要加载的js放到body结束标签之前，使得js可在页面最后加载，尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型，异步加载流程是并发模型。

js获取屏幕坐标

                获取鼠标坐标X: Y:

注释：
1.documentElement 属性可返回文档的根节点。
2.scrollTop() 为滚动条向下移动的距离
3.document.documentElement.scrollTop 指的是滚动条的垂直坐标
4.document.documentElement.clientHeight 指的是浏览器可见区域高度

DTD已声明的情况下：

如果在页面中添加这行标记的话

IE

document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop ==> 浏览器滚动部分高度document.body.scrollTop ==>始终为0document.documentElement.clientHeight ==>浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop==> 始终为0document.body.scrollTop==>浏览器滚动部分高度document.documentElement.clientHeight ==> 浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度，包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。综上1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0，所以可以用这两个的和来求scrollTop2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement，未声明的情况下用body

clientHeight 在IE和FF下，该属性没什么差别，都是指浏览器的可视区域，即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动而变化.可是悲剧的是,PageX只有FF特有,IE则没有这个，所以在IE下使用这个：PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有

boder`,可能出现负值只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.
最给力的是，chrome和safari一条龙通杀!完全支持所有属性

js拖拽效果

offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。

js获取图片原始大小尺寸

var img = $("#img_id"); // Get my img elemvar pic_real_width, pic_real_height;$("
分享前端好文，点亮 在看