JavaScript 经典实例收集整理
（给前端大学加星标，提升前端技能.）
作者：trigkit4
https://segmentfault.com/a/1190000002559158
跨浏览器事件
跨浏览器添加事件
//跨浏览器添加事件function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){//IEobj.attchEvent('on'+type,fn);}}
跨浏览器移除事件
//跨浏览器移除事件function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){//兼容IEobj.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){//w3creturn ev.target;}else if(window.event.srcElement){//IEreturn window.event.srcElement;}}
跨浏览器获取滚动条位置
//跨浏览器获取滚动条位置，sp == scroll positionfunction 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，未声明的情况下用bodyclientHeight在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;$("分享前端好文，点亮 在看
评论