JavaScript 經(jīng)典實例收集整理
（給前端大學加星標，提升前端技能.）
作者：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的同時，同時還會執(zhí)行后續(xù)的頁面處理。在
script標簽內(nèi)，用js創(chuàng)建一個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結(jié)束標簽之前，使得js可在頁面最后加載，盡量減少阻塞頁面的渲染。這樣可以先讓頁面顯示出來。同步加載流程是瀑布模型，異步加載流程是并發(fā)模型。js獲取屏幕坐標
注釋：獲取鼠標坐標 X: Y:
1.
documentElement?屬性可返回文檔的根節(jié)點。2.
scrollTop()?為滾動條向下移動的距離3.
document.documentElement.scrollTop?指的是滾動條的垂直坐標4.
document.documentElement.clientHeight?指的是瀏覽器可見區(qū)域高度DTD已聲明的情況下：
IE
document.body.clientWidth ==> BODY對象寬度document.body.clientHeight ==> BODY對象高度document.documentElement.clientWidth ==> 可見區(qū)域?qū)挾?/span>document.documentElement.clientHeight ==> 可見區(qū)域高度
Firefox
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度document.documentElement.scrollTop ==> 瀏覽器滾動部分高度document.body.scrollTop ==>始終為0document.documentElement.clientHeight ==>瀏覽器可視部分高度document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
Chrome
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度document.documentElement.scrollTop==> 始終為0document.body.scrollTop==>瀏覽器滾動部分高度document.documentElement.clientHeight ==> 瀏覽器可視部分高度document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
瀏覽器所有內(nèi)容高度即瀏覽器整個框架的高度，包括滾動條卷去部分+可視部分+底部隱藏部分的高度總和瀏覽器滾動部分高度即滾動條卷去部分高度即可視頂端距離整個對象頂端的高度。綜上1、document.documentElement.scrollTop和document.body.scrollTop始終有一個為0，所以可以用這兩個的和來求scrollTop2、scrollHeight、clientHeight?在DTD已聲明的情況下用documentElement，未聲明的情況下用bodyclientHeight在IE和FF下，該屬性沒什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁面展示空間的高度。
PageX和clientX
PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化clientX:鼠標在頁面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.可是悲劇的是,PageX只有FF特有,IE則沒有這個，所以在IE下使用這個：PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)scrollTop代表的是被瀏覽器滑動條滾過的長度offsetX:IE特有,鼠標相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點,如果有boder`,可能出現(xiàn)負值只有clientX和screenX?皆大歡喜是W3C標準.其他的,都糾結(jié)了.最給力的是，
chrome和safari一條龍通殺!完全支持所有屬性
js拖拽效果
offsetTop?返回的是數(shù)字，而?style.top?返回的是字符串，除了數(shù)字外還帶有單位：px。js獲取圖片原始大小尺寸
var img = $("#img_id"); // Get my img elemvar pic_real_width, pic_real_height;$("分享前端好文，點亮?在看?
評論
圖片
表情