js注意点自结篇

1.绑定事件的区别

   ele.addEventListener(type,fn,false)   ele.attachEvent('on'+type,fn)

   谷歌，火狐，IE11                                            IE8

   this表示ele(当前绑定事件的对象)                    this表示window

   3个参数                                                           2个参数

   事件类型无on                                                  事件类型带on 

2.事件三个阶段 (e.eventPhase)

   ①捕获阶段 ：从外向里

   ②目标阶段 ：最开始选中的那个

   ③冒泡阶段 ：从里向外

3.addEventListener中的第三个参数控制事件的阶段

   fasle 冒泡阶段

   true  捕获阶段

4.阻止事件冒泡

   IE8  window.event.cancelBubble = true;

   其他  e.stopPropagation()

5.事件参数e在IE8中不存在，所以用window.event来代替

6.页面加载事件

   什么叫页面加载完毕？

          页面中所有的内容，标签，属性，文本，包括外部引入的js文件

   window.onload = function () {

   }

7.location对象

   window.location.hash  // 地址栏上#后面的内容

                             host   // 主机名+端口号

                             hostname // 主机名

                             pathname // 地址栏的虚拟路径

                             port // 端口号

                             protocol // 协议

                             search // get请求后面的参数带?

8.history对象

   window.history.forward();

                           back();

9.navigator对象

   window.navigator.userAgent;// 判断用户浏览器的类型

   window.navigator.platform;// 系统平台类型

10.定时器的 编写 和 清除！！

     var timeId = setInterval(fn,1000)  // 1000ms = 1s

     window.clearInterval(timeId)

11.offset系列

     ele.offsetParent

     ele.offsetWidth    // 元素的宽，有边框

     ele.offsetHeight   // 元素的高，有边框

     ele.offsetLeft       // 元素距离左边位置的距离

     ele.offsetTop       // 元素距离上面位置的距离

     

     未脱离文档流的情况下

     offsetLeft: (所有父级元素margin + border+padding)+自己的margin

     脱离文档流的情况下

     offsetLeft：自己的left + 自己的margin

12.document获取固定元素

     document.body // body

     document.title  // 标签中的值

     document.documentElement // html

13.图片跟着鼠标飞

    document.onmousemove = funciton(e) {

        $('img').style.left = e.clientX + 'px';

        $('img').style.top = e.clientY + 'px';

    }

14.scroll系列

     ele.scrollWidth  // 元素中内容的实际宽度(如果内容很少,元素自身的宽),无边框

     ele.scrollHeight // 元素中内容的实际高度(如果内容很少,元素自身的高),无边框

     ele.scrollLeft // 向左卷曲出去的距离

     ele.scrollTop // 向上卷曲出去的距离

15.无论是否脱标获取left值

if(window.getComputedStyle){

    return window.getComputedStyle(ele,null)[attr];

}else {

    return ele.currentStyle[attr];

}

16.client系列(可视区域)

     clientWidth  // 可视区域的宽(没有边框),边框内部的宽度

     clientHeight // 可视区域的高(没有边框),边框内部的高度

     clientLeft     // 左边边框 的宽度

     clientTop     // 上边框 的宽度 

17.判断函数传入几个参数

     arguments.length,arguments[0]

     IE8不支持，e也没有，用window.event来代替

     兼容：

            e = window.event || e;

    IE8不能用e.pageX 和 e.pageY

    最终：clientX + 卷曲出去的距离

18.父级元素事件冒泡，必须是是相同事件才能阻止

     

19.字符串大量拼接浪费空间

     解决方案

var str = [];
for(var i =0;i<10;i++){
    str.push(i +'');
}
console.log(str.join('|'));

20.自调用函数，是为了防止变量名冲突

      (function(){

            ......

      }());

     自调用函数里面定义的函数外面无法调用

21.宁愿用函数表达式也不用函数声明，因为函数声明在IE8中预解析的时候会有问题

22.this 

     普通函数中的this：window

      定时器中的this：window

      构造函数中的this：实例对象

      对象的方法中的this：实例对象

      对象的原型方法中的this：实例对象

23.严格模式

     "use strict";  //===》严格

      function f1(){

          console.log(this);

      }

      f1();  // ===>undefined

      window.f1();// ===>Window......

24.函数也是对象，对象不一定是函数

     对象中应该有__proto__原型

     函数中应该有prototype原型

      如果一个东西里面既有__proto__又有prototype则，既是函数又是对象