javascript
JavaScript 经典实例日常收集整理(常用经典)
作者：阿訊小飛
原文來(lái)自：腳本之家
跨瀏覽器添加事件
?
//跨瀏覽器添加事件 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); } }?
跨瀏覽器阻止默認(rèn)行為
?
//跨瀏覽器阻止默認(rèn)行為 function preDef(ev){ var e = ev || window.event; if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue =false; } }跨瀏覽器獲取目標(biāo)對(duì)象
?
//跨瀏覽器獲取目標(biāo)對(duì)象 function getTarget(ev){ if(ev.target){//w3c return ev.target; }else if(window.event.srcElement){//IE return window.event.srcElement; } }?
跨瀏覽器獲取滾動(dòng)條位置
?
//跨瀏覽器獲取滾動(dòng)條位置，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 對(duì)象冒充
?
<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() ;//可以簡(jiǎn)化為Object() Person.call(o , "zhangsan" , 20) ; console.log(o.say() );//name : zhangsan age: 20 </script>js 異步加載和同步加載
?
異步加載也叫非阻塞模式加載，瀏覽器在下載js的同時(shí)，同時(shí)還會(huì)執(zhí)行后續(xù)的頁(yè)面處理。
在script標(biāo)簽內(nèi)，用js創(chuàng)建一個(gè)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); })();同步加載
平常默認(rèn)用的都是同步加載。如：
<script src="http://yourdomain.com/script.js"></script>同步模式又稱(chēng)阻塞模式，會(huì)阻止流覽器的后續(xù)處理。停止了后續(xù)的文件的解析，執(zhí)行，如圖像的渲染。瀏覽器之所以會(huì)采用同步模式，是因?yàn)榧虞d的js文件中有對(duì)dom的操作，重定向，輸出document等默認(rèn)行為，所以同步才是最安全的。
通常會(huì)把要加載的js放到body結(jié)束標(biāo)簽之前，使得js可在頁(yè)面最后加載，盡量減少阻塞頁(yè)面的渲染。這樣可以先讓頁(yè)面顯示出來(lái)。
同步加載流程是瀑布模型，異步加載流程是并發(fā)模型。
js獲取屏幕坐標(biāo)
?
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> <meta name="auther" content="fq" /> <title>獲取鼠標(biāo)坐標(biāo)</title> </head> <body> <script type="text/javascript"> function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('xxx').value = mousePos.x; document.getElementById('yyy').value = mousePos.y; } document.onmousemove = mouseMove; </script> X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" /> </body> </html>注釋：
1.documentElement 屬性可返回文檔的根節(jié)點(diǎn)。
2.scrollTop() 為滾動(dòng)條向下移動(dòng)的距離
3.document.documentElement.scrollTop 指的是滾動(dòng)條的垂直坐標(biāo)
4.document.documentElement.clientHeight 指的是瀏覽器可見(jiàn)區(qū)域高度
--------------------------------------------------------------------------------
DTD已聲明的情況下：
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">?
如果在頁(yè)面中添加這行標(biāo)記的話
IE
document.body.clientWidth ==> BODY對(duì)象寬度
document.body.clientHeight ==> BODY對(duì)象高度
document.documentElement.clientWidth ==> 可見(jiàn)區(qū)域?qū)挾?br /> document.documentElement.clientHeight ==> 可見(jiàn)區(qū)域高度
Firefox
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop ==> 瀏覽器滾動(dòng)部分高度
document.body.scrollTop ==>始終為0
document.documentElement.clientHeight ==>瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
Chrome
document.documentElement.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.body.scrollHeight ==> 瀏覽器所有內(nèi)容高度
document.documentElement.scrollTop==> 始終為0
document.body.scrollTop==>瀏覽器滾動(dòng)部分高度
document.documentElement.clientHeight ==> 瀏覽器可視部分高度
document.body.clientHeight ==> 瀏覽器所有內(nèi)容高度
瀏覽器所有內(nèi)容高度即瀏覽器整個(gè)框架的高度，包括滾動(dòng)條卷去部分+可視部分+底部隱藏部分的高度總和
瀏覽器滾動(dòng)部分高度即滾動(dòng)條卷去部分高度即可視頂端距離整個(gè)對(duì)象頂端的高度。
綜上
1、document.documentElement.scrollTop和document.body.scrollTop始終有一個(gè)為0，所以可以用這兩個(gè)的和來(lái)求scrollTop
2、scrollHeight、clientHeight 在DTD已聲明的情況下用documentElement，未聲明的情況下用body
clientHeight
在IE和FF下，該屬性沒(méi)什么差別，都是指瀏覽器的可視區(qū)域，即除去瀏覽器的那些工具欄狀態(tài)欄剩下的頁(yè)面展示空間的高度。
PageX和clientX
PageX:鼠標(biāo)在頁(yè)面上的位置,從頁(yè)面左上角開(kāi)始,即是以頁(yè)面為參考點(diǎn),不隨滑動(dòng)條移動(dòng)而變化
clientX:鼠標(biāo)在頁(yè)面上可視區(qū)域的位置,從瀏覽器可視區(qū)域左上角開(kāi)始,即是以瀏覽器滑動(dòng)條此刻的滑動(dòng)到的位置為參考點(diǎn),隨滑動(dòng)條移動(dòng) 而變化.
可是悲劇的是,PageX只有FF特有,IE則沒(méi)有這個(gè)，所以在IE下使用這個(gè)：
PageY=clientY+scrollTop-clientTop;(只討論Y軸,X軸同理,下同)
scrollTop代表的是被瀏覽器滑動(dòng)條滾過(guò)的長(zhǎng)度
offsetX:IE特有,鼠標(biāo)相比較于觸發(fā)事件的元素的位置,以元素盒子模型的內(nèi)容區(qū)域的左上角為參考點(diǎn),如果有boder`,可能出現(xiàn)負(fù)值
只有clientX和screenX 皆大歡喜是W3C標(biāo)準(zhǔn).其他的,都糾結(jié)了.
最給力的是，chrome和safari一條龍通殺!完全支持所有屬性
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/qingruozhu/p/6473110.html
總結(jié)
以上是生活随笔為你收集整理的JavaScript 经典实例日常收集整理(常用经典)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 05-Flutter移动电商实战-dio
- 下一篇： 超轻量级DI容器框架Google Gui