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> 标签；

    var value=document.body.scrollTop; //var value2=document.documentElement.scrollTop;////兼容性写法;var val=document.body.scrollTop || document.documentElement.scrollTop;

这里再补充一点

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）相关推荐

JavaScript基础实战知识点记录及个人理解2
JavaScript基础&实战知识点记录(26-45集) 第二十六集-运算符的优先级第二十七集-代码块第二十八.二十九.三十.三十一.三十二集-if语句练习1 练习2 练习3 第三十三. ...
SpringMVC知识点记录
SpringMVC知识点记录 1. SpringMVC简介 2. 入门案例 3. @RequestMapping注解 3.1 @RequestMapping注解的功能 3.2 @RequestMapp ...
C++部分知识点记录
文章目录反问为什么想要加入国微芯? 自己的优势/岗位匹配度在哪? EDA(电子设计自动化) 前言 <C++ Primer>知识点记录 1.声明一个返回数组指针的函数(P205) 2.头 ...
javaweb基础知识点记录2
javaweb基础知识点记录 1.在service方法中,首先获得请求的方法名,然后根据方法名调用对应的doXXXX方法,比如说请求参数为GET,那么就会去调用doGet方法,请求参数为POST,那么 ...
javaweb基础知识点记录1
javaweb基础知识点记录 1.当我们通过在浏览器的输入栏中直接输入网址的方式访问网页的时候,浏览器采用的就是GET方法向服务器获取资源. 2.我们可以将Servlet看做是嵌套了HTML代码的ja ...
呕心沥血 JavaScript知识点梳理大全，超详细建议收藏！！！
呕心沥血 JavaScript知识点梳理大全,超详细建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你 ...
毕业论文知识点记录（四）——MaxEnt模型
毕业论文知识点记录(四)--MaxEnt模型 0 序言经过了几次文章分享,数据已经准备得差不多了,师姐说可以先利用现有数据跑一个结果,然后再逐步增加想要的环境数据,改善结果. 另外,谨记师姐的一句话 ...
毕业论文知识点记录（六）——基于R语言优化maxent模型
毕业论文知识点记录(六)--基于R语言优化maxent模型第一步:R安装这个网上都有很多详细的步骤,就不再详细介绍了. 第二步:R安装包因为优化maxent模型需要用到kuenm程序包,但是官网 ...
毕业论文知识点记录（三）——SPSS去相关
毕业论文知识点记录(三)--SPSS去相关 #(一)数据下载 1.草地贪夜蛾的发生记录,这个数据在前面文章中有描述.草地贪夜蛾发生记录下载 2.气候数据数据来源:worldclim 我选择的分辨率是 ...

javascript知识点记录（2）

javascript知识点记录（2）相关推荐

最新文章

热门文章