JavaScript基础深入研究

一、DOM事件

　　1.事件阻止API

　　　　preventDefault() — 阻止浏览器默认
　　　　stopPropagation() — 阻止事件流冒泡
　　　　stopImmediatePropagation() — 阻止事件流冒泡+阻止目标节点上绑定的其他优先级低的回调函数　

　　2.jquery中的return false

　　　　比如xx.on('click',function(){...})

　　　　...为return; — 结束当前回调函数

　　　　...为return false; — 结束当前回调函数+preventDefault()+stopPropagation()

　　3.事件优先级 ie兼容

　　　　标准浏览器以及ie9+中 addEventListener优先级按照绑定顺序；

　　　　ie8- attachEvent 优先级是随机的 

　　　　ie   ele.attachEvent('onclick',function(){...this..})  this指的window

二、javascript加载执行顺序

　　1.两个<script>代码段，因为执行顺序问题，上面的代码段调用下面的代码段函数的话，会报错。

　　2.如果分成预编译和执行两个阶段的话，预编译期会声明所有变量与函数，执行期会给变量赋值。

<script type="text/javascript">  
    alert(a);  
    var a=1;  
    b();
    b=function(){alert(1);}
</script>  

a 代码不会报错，弹出undefined(因为已经声明，但是没有赋值)
b 代码报错，因为下面的函数是作为一个变量，预编译期并未赋值

三、正则

　　0.基础

　　　　/[a-z|A-Z]/  匹配任意大小写以及|

　　　　/[-]/  匹配-

　　　　/[-z]/  匹配-或z

　　　　/[a-zA-Z]/  匹配任意大小写　　　　

　　　　[]里面只能是任意单字符，如果多字符需要或的话，需要用 | 

　　1.构造函数RegExp()创建正则时的转义

　　　　两种方式可以创建正则对象：正则表达式直接量和构造函数RegExp()。

　　　　注意：用构造函数的话，需要对特殊符号进行转义。详细：http://www.cnblogs.com/wang123/archive/2007/09/19/898668.html

var reg=new RegExp("d");
reg.test("1");
//false
var reg=new RegExp("\d");
reg.test("1");
//true
/d/.test("1")
//true

 　　2.replace+正则高级应用

　　　　replace的参数是(reg,fn)的时候，每个匹配都调用fn，它返回的字符串将作为替换文本使用。fn有四个参数：
　　　　　　1.匹配模式的字符串。
　　　　　　2.与模式中的子表达式匹配的字符串，可以有 0 个或多个这样的参数。
　　　　　　3.一个整数，声明了匹配在 stringObject 中出现的位置。
　　　　　　4.最后一个参数是 stringObject 本身。

"xx-yy-zz".replace(/-(.)/g,function(){
            console.log(arguments);
            return arguments[1].toUpperCase();
        });
//["-y", "y", 2, "xx-yy-zz"]
//["-z", "z", 5, "xx-yy-zz"]
//"xxYyZz"

"xx-yy-zz".replace(/((-)(.))/g,function(){
            console.log(arguments);
            return arguments[1].toUpperCase();
        });
//["-y", "-y", "-", "y", 2, "xx-yy-zz"]
//["-z", "-z", "-", "z", 5, "xx-yy-zz"]
//"xx-Yy-Zz"

四、元素的大小和位置

　　每个元素都有下面几个属性（注意要和鼠标事件的位置属性offsetX、clientX、pageX区别开）
　　大小：offsetWidth、clientWidth、scrollWidth
　　位置：offsetLeft、clientLeft、scrollLeft
　　当然对应的还有Height、Top。

js API属性	说明	jquery API
clientWidth	width+padding	innerWidth()
offsetWidth	width+padding+border	outerWidth()
scrollWidth	clientWidth+溢出部分	——
clientLeft	border-left	——
offsetLeft	border外边缘与offsetParent的border内边缘的距离	——
scrollLeft	滚动条向右滚动的距离，可写	——

注：css中定义的width需要用o.style.width或window.getComputedStyle(o).width 来获取

五、函数作用域 　　

var name = "window";   
var object = {   
　name : "object", 
    funA : function(){   
　　　return this.name;   
　},
   funB:function(){
          return this.funA();
   },
   funC:function(){
          return this.funA;
   }
};   
alert(object.funA());//object
alert(object.funB());//object
alert(object.funC()());//window
alert(object.funA.call(window));//window
alert(object.funC().call(object));//object