javascript学习小记

1,event对象

是DOM给事件提供更为详细信息的对象，在定义事件处理函数时经常需要用到，为了确保我们得到的event对象不是空值，我们需要先确认下：

if(!e) 
    e = window.event;

其常用的属性有：event.target(元素出现的对象，比如锚，在部分浏览器中用event.srcElement表示), event.which（键盘事件的键码（Unicode表示），经常与String.fromCharCode使用， 在部分浏览器中用event.keyCode表示）,  event.button（按下的鼠标按键，左键为0或1,右键为2），event.altkey等；

为了兼容不同的浏览器，我们使用有不同的名称的属性时，应如下：

whichlink = (e.target) ? e.target.id : e.srcElement.id;

先判断是哪个有定义再使用

2,onClick与onclick

onClick是指事件，这一事件在单击时发生，如果这一事件发生后，返回了false,则消息单击的效果，如果返回true，则单击成功，后面可以接任何javascript。对于onclick，这是指对象的事件程序，当对象被点击时所执行的程序，与返回值无关；

代码示例：

onClick:
<a href="http:://baidu.com" onClick = "return false;">TEST</a>

onclick:
function mousestate (e) {
    if(!e)
        e = window.event;
    btn = e.button;
    whichone = (btn < 2) ? "Left" : "Right";
    message = e.type + " : " + whichone + "
";
    document.form1.info.value += message;
    return false;
}
obj = document.getElementById("testlink");
obj.onclick = mousestate;

 3.id与name

从w3school中得到如下说明：

a）id属性规定HTML元素的唯一的id， 在HTML文档中必须是唯一的；

b) id属性可用作链接锚，通过Javascript(HTML DOM)或通过CSS为带有指定id的元素改变或添加样式；[getElementById(Id)]

c)name属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过Javascipt引用表单数据。

更多可以参考：HTML中ID与NAME的区别

4.li与其外部元素的对齐

在作下拉菜单时，html中用到了内外的两重ul+li来达到菜单的目的，相关的示例html

    <ul id="MainMenu"> 
        <li class="MenuItem"><a href="#">Home</a></li>

        <li class="MenuItem"><a href="#">Product</a>
            <ul>
                <li><a href="#">Sub-item1</a></li>
                <li><a href="#">Sub-item2</a></li>
            </ul>
        </li>

        <li class="MenuItem"><a href="#">Support</a>
            <ul>
                <li><a href="#">Sub-item1</a></li>
                <li><a href="#">Sub-item2</a></li>
            </ul>
        </li>

        <li class="MenuItem"><a href="#">Information</a>
            <ul>
                <li><a href="#">Sub-item1</a></li>
                <li><a href="#">Sub-item2</a></li>
            </ul>
        </li>

        <li class="MenuItem"><a href="#">Content_us</a>
            <ul>
                <li><a href="#">Sub-item1</a></li>
                <li><a href="#">Sub-item2</a></li>
            </ul>
        </li>
    </ul>

如何让内部的li与外部的对齐呢？这个如果理解了盒子原理就不难弄懂了，可以通过借助Chrome的开发者工具里面的盒子模型来学习和理解。回到正题，设置时只要把内部的ul的填充与空白都设为0就可以了，这时的内容区就可以与外部的对齐了，还要理解父元素与子元素之间的继承，以及改变这种关系。示例代码：

#MainMenu li{
    float: left;
    list-style-type:none;
    padding-right:20px;    
    100px;
}


#MainMenu li ul {
    margin: 0px;
    padding:0px;
}

#MainMenu li ul li {
    float:none; 
    list-style-type:none;
    margin:10px 0px;
    80px;
}

 5.JavaScript的继承

首先要明白JavaScript一开始只是为了作为一种浏览器与网页的互动语言，设计者并没有想把这种脚本语言弄得过于复杂，和C++和Java一样，所以虽然JavaScript是一种面向对象的语言，但是它本身没有与C++和Java一样的类定义，它只有对象的定义，也即“属性的无序集合，每个属性存放一个原始值，对象或函数”。但作为一门面向对象的语言，需要为开发者提供，封闭性，多态性，继承性，聚集性。所以JavaScript的开发者就为此引入了new，prototype,构造方法，原型链，通过这些我们可以模拟类与继承。更多可以参考：http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html

对于继承，可以参考如下代码：

/*Define classA*/
function classA(id, color) {
    this._id = id;
    this._color = color;
}

function showColor() {
}

classA.prototype.className = "classA";
classA.prototype.showColor = function() {
    document.write(this.className + " " + this._id +" "  + this._color + "<br >");
}


/*Define classB inherit classA*/
function classB(id, color, num) {
    classA.call(this, id, color);
　　 this._num  = num;
}

classB.prototype = new classA();  //把A的所有属性和方法都一次性给classB.prototype（达到一次性继承需要共享的属性）
classB.prototype.className = "classB";

/*test code*/
A = new classA("A", "red");
A.showColor();
B = new classB("B", "blue", "3");
B.showColor();

其原型链如下：

B [classB的实例化] {_id, _color, _num}
  classB.ptototype [classA的实例] {[_id, _color;] className : "classB"}
    classA.prototype {showColor : ... , className : "classA"}
      Object.prototype {toString : ... /*etx*/ }

1)思想主要是通过构造方法来设计自身的属性，通过prototype来设计共享的属性；利用对象冒充继承构造函数的属性，用原型链继承prototypec对象的属性

2）在进行属性查找时的机制是：从对象本身开始往上遍历整个原型链，若到了Object.prototype仍未找到，则返回undefined.

3) 不使用classB.prototype = classA.prototype的原因是因为这样的话，两个类的prototype就都指向了同一个地址，会导致修改一个类影响另一个类的后果，而使用classB.prototype = new classA();就可以避免这样的后果，因为只是修改了classA的一个实例。同时要注意的是，所有的classB的实例都共享了同一个classA的实例作为classB.prototype.

6)JavaScript中的RegExp实例方法exec

　　该方法的使用分两种情况，一种是没有全局模式的情况，还有一种就是全局模式时；在没有全局模式的情况，如果匹配成功会返回一个数组，数组的第一项（下标为0）是与正则表达式匹配的内容，第二项开始是捕获组匹配的字符串（也就是说第二项是正则表达式中的第一个子表达式的匹配内容，以此类推），另外这个数组还有两个属性（index表示匹配项在字符串中的位置，而input表示应用 正则表达式的字符串），且对同一个字符串反复使用exec()的结果都是一样的；对于有全局模式的正则来说，每次调用exec()都会在字符串中继续查找新匹配项，且还有一个属性lastIndex,该属性保存了匹配项字符在匹配字符串中的下一个位置。