javascript
javascript知识点记录（2）
1.js 異步加載和同步加載
?異步加載模式也叫非阻塞模式，瀏覽器在下載js的同時，同時還會執行后續的頁面處理，?在script標簽內，用創建一個script元素，并插入到document中，這樣就是異步加載js文件了
//以前的一般建議是把<script>放在頁面末尾</body>之前，這樣盡可能減少這種阻塞行為，而先讓頁面展示出來。 (function (){var script=document.createElement('script');script.type='text/javascript';script.async=true;script.src='http://libs.baidu.com/jquery/1.9.1/jquery.min.js'; //不能是file 開頭的文檔，應為，它是通過src 中的get方式去獲取滴呀var node=document.getElementsByTagName('script')[0];node.parentNode.insertBefore(script,node); })();//這么用就會報錯了滴呀$(function (){ //這里會報錯了，滴呀$為定義滴呀var outer=$('#outer');alert(outer.length);})window.onload=function (){//jq是能夠用滴呀//這種加載方式在加載執行完之前會阻止 onload 事件的觸發，//而現在很多頁面的代碼都在 onload 時還要執行額外的渲染工作等，//所以還是會阻塞部分頁面的初始化處理//更多內容：http://www.jb51.net/article/30324.htm}?
同步加載模式
<script src="http://xxxxx/script.js"></script>同步加載模式又阻塞模式，會阻止瀏覽器的后續處理，阻止了后續文件的解析，執行，如圖像的渲染，瀏覽器之所以會采用同步模式，因為
記載js文件中有對dom的操作，重定向，輸出document等默認行為，所以同步才是最安全的。
通常會把要加載的js放到body結束標簽之前，使得js可在頁面最后加載，盡量減少阻塞頁面的渲染。這樣可以先讓頁面顯示出來。
同步加載流程是瀑布模型，異步加載流程是并發模型。
?
2.js對象冒充
function Person(name,age){this.name=name;this.age=age;this.say=function (){return "name:"+this.name+"age:"+this.age;}}var o=new Object();Person.call(o,"jack",18);console.log(o.say());3.獲取瀏覽器滾動條的位置（被卷曲的頁面）
function getPostion(){return {top: document.documentElement.srollTop || document.body.scrollTop,left:document.documentElement.srollLeft || document.body.scrollLeft}}4.阻止默認行為
function preDef(ev){var e=ev || window.event;if(e.preventDefault){e.preventDefault; }else{e.returnVaule=false;}}5.瀏覽器事件的添加和移除
function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){//ieobj.attachEvent('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);}}6.目標對象
function getTarget(ev){if(ev.target){return ev.target;}else if(window.event.srcElement){return window.event.srcElement; //ie }}7.獲取可視窗口的大小
function getWindow(){if (typeof window.innerWidth !='undefined'){return {width:window.innerWidth,height:window.innerHeight}}else{return {width:document.documentElement.clientWidth,height:document.documentElement.clientHeight }}}?8.防止訂單重復提交
function disable(){//放置訂單重復提交document.getElementById("btn").disabled=true;//方式二var flag=false;if(flag==true){return;}//提交flag=true; }?9.document.body 和?document.documentElement
?關鍵就在于是否聲明DTD,符合 web 標準，DTD 當然是不能少的
body是DOM對象里的body子節點，即 <body> 標簽；?
documentElement 是整個節點樹的根節點root，即<html> 標簽；
?這里再補充一點
1、各瀏覽器下 scrollTop的差異
IE6/7/8：
對于沒有doctype聲明的頁面里可以使用??document.body.scrollTop?來獲取 scrollTop高度?；
對于有doctype聲明的頁面則可以使用?document.documentElement.scrollTop? ；
Safari:
safari 比較特別，有自己獲取scrollTop的函數 ：?window.pageYOffset ；
Firefox:
火狐等等相對標準些的瀏覽器就省心多了，直接用?document.documentElement.scrollTop ；
2、獲取scrollTop值
完美的獲取scrollTop 賦值短語 ：
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
通過這句賦值就能在任何情況下獲得scrollTop 值。
仔細觀察這句賦值，你發現啥了沒？？
沒錯， 就是?window.pageYOffset? (Safari)?? 被放置在 || 的中間位置。
因為當?數字0?與?undefine?進行 或運算時，系統默認返回最后一個值。即或運算中 0 == undefine ;
當頁面滾動條剛好在最頂端，即scrollTop值為 0 時。? IE 下 window.pageYOffset? (Safari) 返回為 undefine ，此時將?window.pageYOffset? (Safari) 放在或運算最后面時， scrollTop 返回 undefine ,? undefine 用在接下去的運算就會報錯咯。
而其他瀏覽器 無論 scrollTop 賦值或運算順序如何都不會返回 undefine.? 可以安全使用..
所以說到頭還是IE的問題咯. 杯具…
精神有點恍惚，不知道有沒有表達清楚。
不過最后總結出來這句實驗過OK，大家放心使用；
var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
?
10關于事件源
var obj=document.getElementById('btn1');obj.onclick=function (e){var eventObj=e; //這種方式在ie下為undefinedvar eventObj=e || window.event;//第二兼容性問題//在ie下用 srcElemnt 在火狐下用 targetvar eventOri=eventObj.srcElement || eventObj.target;//現在我們可以取出它額console.log(this===obj); //結果返回的是true滴呀console.log(this===eventOri);//返回的也是ture滴//所以我們可以做很多操作console.log(this.value) //clickconsole.log(this.id) //屬性；console.log(this.parentNode); //bodyconsole.log(this.innerHTML);console.log(this.getAttribute('id'));//還可以做等等一些的操作i呀 }關于target 和 currentTarget
<body><div id="outer" style="background:#099"> click outer <p id="inner" style="background:#9C0">click inner</p> <br> </div> </body> <script type="text/javascript">//先由文字描述//target在事件流的目標階段，current//target在事件流的目標階段；currentTarget在事件流的捕獲，目標及冒泡階段。//只有當事件流處在目標階段的時候，兩個的指向才是一樣的， //而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）。var $=function (id){typeof id=='string'&&(id=document.getElementById(id));return $.fn.call(id)}$.fn = function (){//附加2個方法this.addEvent = function (sEventType,fnHandler){if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);} else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);} else {this["on" + sEventType] = fnHandler;}}this.removeEvent = function (sEventType,fnHandler){if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);} else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);} else { this["on" + sEventType] = null;}}return this; };function test(e){var str='e.target.tagName:'+e.target.tagName+'\n e.currentTarget.tagName:'+e.currentTarget.tagName;alert(str);}$('inner').addEvent('click',test); //結果都是p$('outer').addEvent('click',test); //結果是 p 和 div</script>?
轉載于:https://www.cnblogs.com/mc67/p/5435589.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的javascript知识点记录（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Linux下怎么改分辨率和刷新率?
- 下一篇： gradle idea java ssm