JavaScript 概览 更新时间2014-0414-0837

一些概念

DOM（文档对象模型）是HTML和XML的应用程序接口（API）。
DOM Level1规划文档结构；DOM Level2扩展了对鼠标和用户界面事件等的支持；DOM Level3支持了XML1.0特性，包括XPath等。
还有其他语言发布了自己的DOM标准：可缩放矢量图形（SVG），同步多媒体集成语言（SMIL）等。
DOM描述了处理网页内容的方法和接口；BOM描述了与浏览器进行交互的方法和接口。

ECMAScript数据类型

5种原始类型：Undefined、Null、Boolean、Number、String；
对应的使用typeof运算符返回：undefined、object、boolean、number、string。
undefined值实际上是从null派生而来，因此null==undefined。

所有ECMAScript数值必须在Number.MAX_VALUE和Number.MIN_VALUE之间；
当计算的数大于Number.MAX_VALUE时候会被赋予值Number.POSITIVE_INFINITY，显示为Infinity；
当计算的数小于Number.MIN_VALUE时候会被赋予值Number.NEGATIVE_INFINITY，显示为-Infinity。
可以对任何数调用isFinite() ，已确保该数不是无穷大。
另外还存在一个特殊值NaN，表示非数，例如在类型转换失败时会变为非数，可以通过isNaN()来判断，另外NaN不等于NaN。

转换数字可以使用parseInt()和parseFloat()方法，只能对String类型的调用这些方法，对其他类型的返回为NaN。
强制类型转换可以使用Boolean()、Number() 、String()。
Number(undefined)返回NaN；Number(null)返回0。

Object类具有的属性：constructor、prototype；
Object类具有的方法：hasOwnProperty()、isPrototypeOf()、propertyIsEnumerable()、toString()、valueOf()。

var o={};
alert(o.hasOwnProperty("toString")); /* false */
alert(Math.hasOwnProperty("cos")); /* true */

当一个对象用于数字环境时，JavaScript首先调用该对象的valueOf()方法，
如果valueOf()方法返回对象本身，JavaScript会使用toString()方法把对象转换为一个字符串，然后再试图转换为对象。

var o={
    valueOf:function(){
        return {};    /* 这里的值不能转换为数字，会尝试调用toString */
    },
    toString:function(){
        return "10"; /* 这里如果返回10，那么最后输出就是10+10=20 */
    }
};
o+10                /* 这里输出"1010" */

 String类的各种方法：

charCodeAt	字符代码
concat	连接一个或多个字符串，保持原始的String对象不变
indexOf	指定子串在另一个字符串中的位置
slice(start,end)	该方法截取子串，若参数是负数则会用字符串的长度加上参数；不改变String对象自身
substring	该方法截取子串，如果对于负参数，将当作0处理；不改变String对象自身
toUpperCase	转换大写
toLowerCase	转换小写
charAt	获取一个位置的字符串

JavaScript中没有改变字符串中字符的语法、方法或属性，这并非疏漏，
因为在JavaScript中字符串作为一种基本类型，通过复制和传递是不可改变原内容，在比较运算中，字符串是通过传值来比较的。

instanceof运算符：和typeof运算符类似，但该运算符可以确认对象为某特定类型，例如"hello" instanceof String。

var number_obj = Object(3);
number_obj instanceof Number;

运算

逻辑OR运算中如果一个运算数是对象，另一个是Boolean值，则返回该对象，例如 false||{} 输出的是对象。
两个字符串形式的数字进行比较时候，比较的是字符代码；但如果一个字符串数字和数字进行比较，那么字符串数字会先转换为数字，例如 "23"<3为false；
字符串和数字比较，字符串无法转换为有效数字，例如 "a"<3 返回为false，因为"a"尝试parseInt()返回为NaN，任何和NaN的关系运算都为false。
字符串和布尔值比较，例如 "1"==true ，先把true转换为1，然后字符串"1"也发现和数字比较，也转换为1，两个数字比较，最后得出相等。

对象检测属性存在的in运算符（通过delete删除的对象属性使用in运算符也不会检测到）：

var o={x:100,y:undefined};
if("y" in o){
    o.y=200;
}
if("z" in o){
    o.z=200;
}
alert(o.y);
alert(o.z);

函数

使用new Function来定义一个函数，允许JavaScript代码被动态创建并在运行时编译。 
尽管可以使用Function构造函数创建函数，但用它定义函数比用传统方式要慢得多，类似于eval；另外不能访问局部作用域（总是被当作顶层的函数）：

var g="global";
function createFun(){
    var g="local";
    return new Function("v1","v2","return v1+v2+g;");
}
alert(createFun()("hell","o"));

函数内标识符arguments是一个类似数组的对象，其中还定义了callee属性，用来引用当前正在执行的函数，可以允许对未命名的函数递归地调用自身：

(function(x){
    if(x<=1) return 1;
    return x+arguments.callee(x-1);
})(100);

函数的length属性是只读特性，返回的是函数需要的实际参数的数目：

var f=function(x,y,z){
    if(arguments.callee.length!=arguments.length){
        return 0;
    }
    return x+y+z;
};
alert(f(1,2));
alert(f(1,2,3));

对象

ECMA-262定义的本地类：

Object	Function	Array	String	Boolean
Number	Date	RegExp	Error	EvalError
RangeError	ReferenceError	SyntaxError	TypeError	URIError

Array对象可以使用join方法连接字符串，String对象可以用split方法转换字符串为数组。
Array对象还具有两个String类具有的方法，concat和slice方法，返回的为新的数组，不改变原始数组，其中concat方法的参数如果存在数组，则会被展开（但不递归展开）。
Array对象还有push方法（返回数组长度）、pop方法（返回删除的值）、shift方法（返回删除的值）、unshift方法（返回数组的长度）。
Array对象可以使用reverse方法颠倒数组项顺序，sort方法将根据数据项的值按升序排序：

var a=[33,4,111,222];
a.sort(); /* 1111,222,33,4 */
a.sort(function(a,b){
    return a-b;
}); /* 4,33,22,111 */

Array对象还有个splice方法，可以实现删除替换操作，该方法会改变原始数组，方法本身返回删除了的元素数组：

var a=[1,2,3,4];
alert(a.splice(2,1,300,301)); /* 3 */
alert(a); /* 1,2,300,301,4 */

Array对象有些额外的方法，例如indexOf()和lastIndexOf()方法、forEach()方法、map()方法、filter()方法，如果想实现兼容需要对这几个方法进行更多兼容性处理：

if(!Array.prototype.map){
    Array.prototype.map=function(f,scope){
        var re=[];
        for(var len=this.length,i=0;i<len;i++){
            re.push(f.call(scope,this[i],i,this));
        }
        return re;
    };
}
[1,2,3].map(function(v,i,a){
    return v+i;
}); /* return [1,3,5] */

Date对象可以使用UTC方法返回日期的毫秒表示，例如 new Date(Date.UTC(2012,1,29,8,30)); 为UTC的2012年2月29日8点30分。

Global对象是个特别的对象，设计上根本不存在，如isNaN等方法都是Global对象的方法。
Global对象中还有encodeURI编码链接，还有encodeURIComponent对所有非标准字符进行编码。
Global对象的eval方法，解释程序会把eval方法的参数解释为真正的ECMAScript语句，然后插入该函数所在的位置，因此eval方法可以调用局部变量：

(function(){
    var msg="hello world";
    eval("alert(msg);var o={o:1};");
    var re=eval("({a:1})");
    alert(o.o); /* eval中定义的变量 */
    alert(re.a); /* eval可以返回一个变量 */
})();

Math对象存在一个ceil向上舍入函数、floor方法向下舍入函数、round方法四舍五入函数。
Math对象配合random方法可以生成随机数，例如生成1到10之间的数： Math.floor(Math.random()*10+1); 

继承

使用call和apply方法可以实现对象冒充。

可以通过一个中间对象来实现继承：

function extend(sb,sp){
    var bridge=function(){};
    bridge.prototype=sp.prototype;
    var o=new bridge();
    sb.prototype=o;
    o.constructor=sb;
    sb.superclass=sp;
    return sb;
}
function class1(nm){
    this.nm=nm;
}
class1.prototype.getnm=function(){
    return this.nm;
};
function class2(nm){
    class2.superclass.call(this,nm);
}
extend(class2,class1);
ao=new class2("zxf");
ao.getnm();

属性继承只在读取属性值的时候发生，而当写入属性值的时候不会发生。

如上的中间对象继承方式，在ES5中内置了Object.create()方法，若没有第二个参数的情况下相当于：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
</style>
<script type="text/javascript">
// 利用某个对象创建派生类的原型对象.
Object.create = Object.create || function(o){
    function F(){};
    // 注意IE下会忽略toString和valueOf方法的prototype
    F.prototype = o;
    return new F();
};
// 拷贝.
function extend(dest, source){
    for(var p in source){
        dest[p] = source[p];
    }
    return dest;
}
// 派生.
function inherit(chd, Parent, proto){
    function f(){
        // 继承父类的特权成员.
        parent.apply(this,argument);
        // 执行自身的构造函数.
        chd.apply(this,argument);
    }
    // 这里的create可能是原生也可能是兼容处理的，因此不使用第二个参数.
    f.prototype = Object.create(Parent.prototype,{});
    // 设置派生类的构造函数.
    f.prototype.constructor = f;
    // 添加子类特有的原型成员.
    extend(f.prototype, proto);
    // 继承父类的类成员.
    extend(f, Parent);
    return f;
}

window.onload=function(){
    function A(){}
    A.prototype={test:"a test"};
    function B(){};
    B.prototype=Object.create(A.prototype);
    var b=new B();
    document.body.innerHTML=b.test;
};
</script>
</head>
<body></body>
</html>

Object.create实现继承

另外在ES6中，__proto__ 属性已经规范化，因此一个类的对象可以通过__proto__访问到原型。

浏览器中的JavaScript

有时候会使用document.write()方法或innerHTML属性来输出其他脚本，这时候应该输出一个</script>标记来终止所创建的脚本，
因为HTML解析器不理解JavaScript代码，如果它看到代码中的"</script>"字符串，即使</script>标记出现在引号中，HTML解析器也会认为当前运行脚本结束。

document.write("<script>");
document.write("alert('hello world');");
document.write("</"+"script>");

URL中可以使用javascript:伪协议来执行javascript，因此可以将这种方式用于书签中，实现特定的Bookmarklets。

javascript:var cks=document.cookie,acks=cks.split(";"),info="";for(var s in acks){info+=acks[s]+"


";}alert(info);

浏览器厂商的兼容性问题处理：例如Firefox，因为IE下支持document.all，
Firefox之后也添加了对document.all的支持，但是如果使用document.all来进行浏览器检测，Firefox会假装不支持。

if(document.all||typeof document.all){
      alert("document.all is ok.")
}
else{
      alert("document.all?");
}
alert(document.all);

IE的HTML条件注释，可以用于额外对IE支持不良好的JavaScript进行处理，IE10开始不支持条件注释。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    </style>
    <!--[if IE]>
    <script type="text/javascript">
    alert("IE");
    </script>
    <![endif]-->
    <!--[if gt IE 6]>
    <script type="text/javascript">
    alert("gt IE 6");
    </script>
    <![endif]-->
<body>
</body>
</html>

JavaScript在操作URL的时候容易被注入HTML或脚本，也称跨站脚本XSS，因此在通过JavaScript设计实现的时候特别要注意安全问题。
例如JavaScript使用document.location.search获取值并通过document.write写HTML，会产生安全问题。

BOM浏览器对象模型 基础

XHTML中引入javascript要注意需要CDATA段才能识别，另外要兼容不支持XHTML的浏览器（可能不识别CDATA段），因此嵌入XHTML的代码可能如下：

<script type="text/javascript">
//<![CDATA[
    function add(a,b){
        return a+b;
    }
//]]>
</script>

window对象中有top对象和parent对象和self对象来指明窗口对象，还有frames属性包含这个窗口的帧。
如果给帧指定了名字，那对帧的引用会存储到它的父window对象的一个新属性中。

window.open()方法打开新窗口，存在四个参数(URL,新窗口名字,特性字符串,是否新载入页面替换当前页面)，并可以通过window.close()来关闭窗口。
一个新窗口可以通过window.opener属性引用打开它的窗口，如果非JavaScript代码创建，那么它的opener属性是null。
一个新窗口关闭后，通过window.closed属性检测窗口是否关闭，因为即使窗口关闭了，代表它的window对象还存在。

window.open("http://www.baidu.com","_blank","height=100,width=100,top=10,left=10");

window对象可以通过alert()方法弹出显示框；通过confirm()方法弹出确定框；通过prompt()方法弹出文本输入框。

setTimeout()方法设置延迟执行，其中参数可以用字符串也可以直接传递函数；取消未执行的setTimeout()可以使用clearTimeout()方法。
setInterval()方法可以设置重复执行，同样的可以通过clearInterval()方法来停止执行。
有时候会使用setTimeout()方法注册一个延迟0微秒后调用的方法，这样浏览器会在完成文档的状态更新之后调用方法。

(function(){
    var x=10;
    setTimeout("alert(typeof x);",1000);    /* undefined */
    setTimeout(function(){alert(typeof x)},2000);    /* number */
})();

window.history对象有go()方法，可以传递前进或后退的页面数，更简单的可以使用history.back()和history.forward()方法。

window.document对象比较特殊，即属于BOM又属于DOM。

window.location对象包含protocol、host、port、pathname、search、hash以及href等属性。
window.location.replace()方法可以跳转到新页面并且从浏览器历史中删除原页面记录；
window.location.reload()方法可以从服务端重新加载当前页面。
window.location对象和document.location对象实际上是等同的：window.location===document.location。

/* 获取#后的内容，#不存在则捕获空字符串，否则捕获#后字符串 */
function gethash(uri){
    return uri.replace(/^[^#]*#?(.*)$/,'$1');
}
/* location.hash在获取例如#test?this_will_ignore这样的hash时会存在问题 */

window.navigator对象包含大量WEB浏览器的信息，通常使用navigator.userAgent来判断客户端环境。

window.screen对象可以获取部分用户系统信息，例如screen.availHeight可获取屏幕可以使用的像素高度，screen.height可以获取屏幕高度。

window对象上有一组简单的属性来获取有关窗口的大小和位置信息，例如window.screenX等。
但旧版本的IE将这些窗口的几何属性放置在HTML文档的body元素上，而声明了DOCTYPE的IE6开始把这些属性放置在document.documentElement元素上。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body div{background: #eee;height:1000px;}
    </style>
<script>
function getWinInfo(){
    var wininfo={};
    var de=document.documentElement&&document.documentElement.clientWidth?document.documentElement:null;/* IE with DOCTYPE */
    de=de?de:(document.body.clientWidth?document.body:null); /* IE without DOCTYPE */
    if("screenX" in window){
        // 浏览器位置.IE9开始支持.
        wininfo.screenX=window.screenX;
        wininfo.screenY=window.screenY;
        wininfo.TEST0=true;
    }
    else if(window.screenLeft){
        // IE.
        wininfo.screenX=window.screenLeft;
        wininfo.screenY=window.screenTop;
    }
    if(de){
        // 视图大小.不包括滚动条.非IE浏览器也支持.
        wininfo.innerWidth=de.clientWidth;
        wininfo.innerHeight=de.clientHeight;
    }
    else if(window.innerWidth){
        // 实际上这里的分支不会执行，加深理解.
        // 视图大小.不包括滚动条.IE9支持，但IE理解为包含滚动条了.
        wininfo.innerWidth=window.innerWidth;
        wininfo.innerHeight=window.innerHeight;
        wininfo.TEST1=true;
    }
    if("pageXOffset" in window){
        // 滚动位置.IE9开始支持.
        wininfo.pageXOffset=window.pageXOffset;
        wininfo.pageYOffset=window.pageYOffset;
        wininfo.TEST2=true;
    }
    else{
        // 滚动位置.
        wininfo.pageXOffset=de.scrollLeft;
        wininfo.pageYOffset=de.scrollTop;
    }
    // 文档大小，不包括滚动条部分.
    wininfo.scrollWidth=de.scrollWidth;
    wininfo.scrollHeight=de.scrollHeight;

    var show="";
    for(var s in wininfo){
        show+=s+"="+wininfo[s]+"
";
    }
    alert(show);
}
window.onload=function(){
    document.body.firstChild.onclick=function(){
        getWinInfo();
    }
}
</script>
<body><div>click</div></body>
</html>

window对象中存在scrollBy()来进行文档的相对滚动和scrollTo()来进行文档的指定像素滚动；
另外可以通过focus()方法设置元素键盘焦点来使文档滚动到元素可见位置；
更多现代浏览器支持n.scrollIntoView()方法来使元素可见，该方法可以在任何HTML元素上工作；
另外还可以通过锚链接来滚动到指定位置，例如window.location.hash="#top"，若不想打乱浏览历史，则可以window.location.replace("#top")来实现。

DOM文档对象模型 基础

document.write()方法可以在HTML中插入文本，但如果一个<script>标签包含defer属性，那就不能包含对document.write()的调用，
defer属性告诉浏览器，把脚本的调用延迟到文档完全载入后调用。

var w=window.open(null,"_win_name");
var d=w.document;
d.open(); /* 非必需 */
d.write("<h1>","hello","</h1>");
d.close();

document对象还定义了cookie、domain、lastModified、location、referrer、title、URL等属性。
document对象还定义了一些文档集合，如anchors、forms、images、links等文档集合，
如果通过name属性命名这些集合中的元素，例如<form name="myform">，那么可以通过document.myform的方式引用该表单，
如果一个文档中有多个文档元素具有相同值的name属性，那么document._myname属性就会是一个保存这些元素的数组。

DOM定义了Node的接口，定义了不同类型节点的12个常量，例如Node.ELEMENT_NODE值为1，Node.TEXT_NODE值为3，还定义了一些特性和方法：

nodeName	节点的名字
nodeValue	节点的值
nodeType	节点的类型常量值
ownerDocument	这个节点所属的文档
firstChild	指向在childNodes列表中的第一个节点
lastChild	指向在childNodes列表中的最后一个节点
childNodes	所有子节点的列表
previousSibling	前一个兄弟节点，如果这个节点已经是第一个兄弟节点，则为null
nextSibling	后一个兄弟节点，如果这个节点已经是最后一个兄弟节点，则为null
hasChildNodes()	判断childNodes是否包含一个或多个节点
attributes	Element节点的Attr对象
appendChild(node)	将node节点添加到childNodes的末尾
removeChild(node)	从childNodes中删除node
replaceChild(newnode,oldnode)	将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode)	在childNodes中的refnode之前插入

访问HTML节点可以通过document.documentElement来获取。
在判断TEXT类型节点的时候，不同浏览器有不同的表现，例如IE忽略元素之间的空白，而FireFox认为元素间的空白都是TEXT节点。
可以使用node.nodeType属性来检测节点类型，返回的为数字，也可以用Node.ELEMENT_NODE等常量来比较（IE9以前的IE浏览器不支持，Node未定义）。

可以使用node.getAttribute()、node.setAttribute()以及node.removeAttribute()来处理节点特性。
IE使用setAttribute方法时，有时候变更并不会总是正确的反应出来，
例如对 niframe.setAttribute("frameborder",0) 时，IE无效，需要 niframe.frameBorder=0 才有效。

访问指定节点可以使用getElementsByTagName()，当参数是星号的时候，IE6之前版本并不返回所有元素，需要使用document.all来代替。
访问指定节点可以使用getElementsByName()，IE6下存在一个BUG，会返回id也等于给定名称的元素，另外IE6仅仅检查<input/>和<img/>元素。
访问指定节点可以使用getElementById()，IE6下存在一个BUG，如果给定的id匹配某个元素的name特性，IE6会返回这个元素。
实际中可能希望实现通过类名来选择节点，如下是一个兼容的实现方式（参考司徒正美document.getElementsByClassName的理想实现）：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    body div{background: #eee;}
    </style>
<script>
window.onload=function(){
  var getElementsByClassName = function(searchClass, node, tag) {
    node = node || document;
    tag = tag || "*";
        if(document.getElementsByClassName){
            var nodes = node.getElementsByClassName(searchClass),
            result = [];
            for(var i = 0; node = nodes[i++];){
                if(tag == "*" || node.tagName === tag.toUpperCase()){
                  result.push(node);
                }
            }
            return result;
        }
        else{
            var classes = searchClass.split(" "),
            // IE6之前不支持getElementsByTagName的*参数.
            elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
            patterns = [],
            result = [];
            // 生成正则匹配.
            var i = classes.length;
            while(--i >= 0){
                patterns.push(new RegExp("(^|\s)" + classes[i] + "(\s|$)"));
            }
            // 遍历元素.
            var j = elements.length;
            while(--j >= 0){
                var current = elements[j];
                var match = false;
                for(var k=0, kl=patterns.length; k<kl; k++){
                  match = patterns[k].test(current.className);
                    if(!match){
                    break;
                  }
               }
                if(match){
                  result.push(current);
                }
            }
            return result;
        }
    }
    alert(getElementsByClassName("a b"));
};
</script>
<body>
<div class="a">a</div>
<div class="a b">a b</div>
<div class="a b c">a b c</div>
</body>
</html>

创建节点可以通过createElement()来创建节点，通过createTextNode()来创建文本节点，
通过appendChild()添加到DOM树，也可以使用removeChild()、replaceChild()、insertBefore()进行操作。

使用createDocumentFragment()可以创建一个文档片段，最后再插入文档
（注意使用文档片段的方式创建script节点并添加到DOM树，可能导致script中引用文件的脚本不执行）。

Table有些DOM API能够协助建立表格，例如createTHead()、createTFoot()等等。

DOM Level2中可以使用createNodeIterator以及createTreeWalker来遍历DOM树（IE系列从IE9开始支持）（待完成）。

DOM动态样式

使用元素的style属性可以获取文档元素的CSS2Properties对象，
通过这种方式只能设置元素的内联样式，读取这些属性将返回元素的style属性所设置的CSS属性值。
JavaScript中的CSS命名时需要将连字符删除，并将之后的字母大写；另外某些关键词需要修改：
CSS的float样式在JavaScript中为n.style.cssFloat。，IE678为n.style.styleFloat。

如果希望查询应用到给定元素的完整样式集合的方法，可以使用W3C的window.getComputedStyle()方法，该方法的第二个参数是任何CSS伪元素，
IE非标准化的支持API为currentStyle，因此跨平台的方式可能如下：

var n=document.body;
if(n.currentStyle){
    alert(n.currentStyle.marginTop);
}
else{
    alert(window.getComputedStyle(n,null).marginTop);
}
alert(n.style.marginTop);/* 这里获取的并不一定为最终样式 */

使用元素的className属性可以修改文档元素关联的CSS类。

DOM2标准为<link>和<style>标签都定义了一个disabled属性，如果设置为true，则相关的样式表就会被关闭。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" id="ss0">
    body div{background: #eee;}
    </style>
<script>
window.onload=function(){
  setTimeout(f,1000);
  function f(){
    document.getElementById("ss0").disabled=true;
  }
}

</script>
<body>
<div>背景色1秒后消失</div>
</body>
</html>

动态添加CSS样式表可以通过W3C的insertRule()方法；IE兼容的方法为addRule()，如下为一个动态添加CSS样式的例子：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css" id="ss0">
    </style>
<script>
window.onload=function(){
  var hd=document.getElementsByTagName("head")[0];
  var stn=document.createElement("style");
  stn.setAttribute("type","text/css");
  hd.appendChild(stn);
  var st=stn.styleSheet?stn.styleSheet:stn.sheet;
  var ls=st.cssRules?st.cssRules.length:st.rules.length;
  if(st.insertRule){/* W3C API IE9开始支持 */
      st.insertRule("body{background:blue;}",ls);
  }
  else if(st.addRule){
      st.addRule("body","background:green;",ls)
  }
}

</script>
<body>
<div>JS方式添加CSS样式规则</div>
</body>
</html>

DOM事件处理

DOM1中并未定义事件，DOM2中才定义了一小部分子集，完整的事件在DOM3中定义。

冒泡型事件流基本思路是：事件按照最特定的事件目标到最不特定的事件目标的顺序触发。
IE6中事件可以从div->body->html->document流动；Firefox中事件可以从div->body->html->document->window流动。

DOM同时支持冒泡型事件和捕获型事件，捕获型事件先发生，
例如一个div点击的事件流可能是：window->document->body->div->body->document->window。
DOM事件模型中，文本节点也可以触发事件（在IE中不会）。

通过HTML属性或者JavaScript属性设置的事件，会根据它的返回值说明事件的后续影响，
例如onsubmit事件返回false可以阻止真正的表单提交，其他还有onclick等。

通过HTML属性定义的事件句柄，它所执行的作用域链会延伸到到触发的对象的冒泡对象上。

n.onclick=function(){
    with(document){
        with(this.form){
            with(this){
                alert(123);
            }
        }
    }
};

最通常的事件处理函数绑定：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
     *{margin: 0px;padding: 0px;}
     #c{margin:0 100px;background: yellow;}
    </style>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
    var n=document.getElementById("c");
    n.onclick=function(){
        alert("hello world");
    }
}
//]]>
</script>
</head>
<body>
    <div id="c">
        单击这里
    </div>
</body>
</html>

IE中使用attachEvent()和detachEvent()方法来添加删除事件处理函数，
事件可以被重复添加，不支持捕获，作用域为"window"，添加①②③后的执行顺序为③②①。
DOM中使用addEventListener()和removeEventListener()方法来移除事件处理函数（IE9开始支持），
使用该方法添加的事件不会重复添加，支持捕获，作用域为"this"，添加①②③后的执行顺序为①②③。
addEventLister()和removeEventLister()方法存在三个参数，第一个参数说明事件名，不需要"on"开头，最后一个参数为true时用于捕获阶段。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <style type="text/css">
     *{margin: 0px;padding: 0px;}
     #c{margin:0 100px;background: yellow;}
    </style>
<script type="text/javascript">
//<![CDATA[
var handler={};
if(document.addEventListener){
    handler.add=function(n,tp,f){
        n.addEventListener(tp,f,false);
    };
    handler.remove=function(n,tp,f){
        n.removeEventListener(tp,f,false);
    };
}
else if(document.attachEvent){
    handler.add=function(n,tp,f){
        // 重复注册事件句柄将被忽略.同DOM的addEventListener逻辑相同.
        if(handler._find(n,tp,f) != -1){
            return;
        }
        var wraphandler=function(e){
            if(!e){
                e=window.event;
            }
            // 对IE的事件对象进行兼容处理.
            var event={
                _event:e,
                type:e.type,
                target:e.srcElement,
                currentTarget:n,
                relatedTarget:e.fromElement?e.fromElement:e.toElement,

                clientX:e.clientX,
                clientY:e.clientY,
                screenX:e.screenX,
                screenY:e.screenY,
                altKey:e.altKey,
                ctrlKey:e.ctrlKey,
                shiftKey:e.shiftKey,
                charCode:e.keyCode,
                stopPropagation:function(){this._event.cancelBubble=true;},
                preventDefault:function(){this._event.returnValue=false;}
            }
            // 作用域和事件对象参数调整后触发.
            f.call(n,event);
        };
        // 这里使用IE原生事件添加方法进行添加.
        n.attachEvent("on"+tp,wraphandler);
        var h={
            n:n,
            tp:tp,
            f:f,
            wraphandler:wraphandler
        };
        // 获取节点所在的文档.
        var d=n.document||n;
        // 获取节点所在的文档的窗口.
        var w=d.parentWindow;
        // 唯一句柄.
        var id=handler._uid();
        if(!w._allhandlers) w._allhandlers={};
        if(!n._handlers) n._handlers=[];
        // 这里会记录所有事件相关的对象.
        w._allhandlers[id]=h;
        // 这里会在节点上记录事件相关对象的句柄.
        n._handlers.push(id);
        // onunload的时候删除所有事件句柄，防止IE的内存泄漏.
        if(!w._onunloadHandlerRegistered){
            w._onunloadHandlerRegistered = true;
            w.attachEvent("onunload", handler._removeallhandler);
        }
    };
    // 删除事件对象.
    handler.remove=function(n,tp,f){
        var i=handler._find(n,tp,f);
        if(i==-1)return;
        var d=n.document||n;
        var w=d.parentWindow;
        var handlerid=n._handlers[i];
        var h=w._allhandlers[handlerid];
        n.detachEvent("on"+tp,h.wraphandler);
        n._handlers.splice(i,1);
        delete w._allhandlers[handlerid];
    }
    // 查找.
    handler._find=function(n,tp,f){
        var handlers=n._handlers;
        if(!handlers) return -1;
        var d=n.document||n;
        var w=d.parentWindow;
        for(var i=handlers.length-1;i>=0;i--){
            var handlerid=handlers[i];
            var h=w._allhandlers[handlerid];
            if(h.tp==tp&&h.f==f){
                return i;
            }
        }
        return -1;
    };
    // 遍历删除关联的所有事件对象.
    handler._removeallhandler=function(){
        var w=this;
        for(var id in w._allhandlers){
            var h=w._allhandlers[id];
            h.n.detachEvent("on"+h.tp,h.wraphandler);
            delete w._allhandlers[id];
        }
    };
    // UID产生器
    handler._counter=0;
    handler._uid=function(){return "h"+handler._counter++;}
}
window.onload=function(){
    var n=document.getElementById("c");
    handler.add(n,"click",function(e){
        alert("hello world1"+e.target);
    });
    handler.add(n,"click",function(e){
        alert("hello world2"+e.target);
    });
    handler.add(n,"click",function(e){
        alert("hello world3"+e.target);
    });
}
//]]>
</script>
</head>
<body>
    <div id="c">
        单击这里
    </div>
</body>
</html>

兼容实现事件的添加删除，这里未考虑attachEvent导致的执行顺序的问题

如上实现的方式会发现在attachEvent和addEventListener触发添加的事件的顺序是不同的，因此可以换一种思路实现：
对于只支持attachEvent方法的环境，可以通过节点的一个对象来记录所关联的事件类型，
每个事件类型只通过attachEvent关联一个方法，并维护一个事件数组，之后添加的同类型事件直接添加到事件数组中，遍历执行。

DOM事件对象

在IE中事件对象是window对象的一个属性event，在DOM中，事件对象是事件处理函数的第一个参数。

IE和DOM中相同的事件对象属性：

属性	描述	更多说明
type	事件名称，返回例如"click"或"mouseover"
keyCode	表示按下按钮的数字代号（IE对于keydown/keyup事件）
shiftKey	true表示按下shift键
altKey	true表示按下alt键
ctrlKey	true表示按下ctrl键
clientX	事件发生时鼠标在客户端区域的x坐标	IE外浏览器需要window.pageXOffset
clientY	事件发生时鼠标在客户端区域的y坐标	IE外浏览器需要window.pageYOffset
screenX	相对于整个计算机屏幕的鼠标x坐标
screenY	相对于整个计算机屏幕的鼠标y坐标
button	对于特定的鼠标事件，表示按下的鼠标按钮，用数字表示	W3C为0左1中2右，IE为142

IE和DOM中不同的事件对象属性以及方法：

描述	IE	DOM	更多说明
获取目标	e.srcElement	e.target	可能与currentTarget不同
获取字符代码	e.keyCode	e.charCode	然后可以通过String.fromCharCode()方法获取实际字符，另外可以通过e.isChar属性判断按下的键是否包含字符
阻止事件默认行为	e.returnValue=false;	e.preventDefault();	相当于DOM0事件模型中返回false
停止事件冒泡	e.cancelBubble=true;	e.stopPropagation();
鼠标指针来自去向	e.fromElement、e.toElement	e.relatedTarget	e.relatedTarget?e.relatedTarget:(e.type=="mouseover"?e.fromElement:e.toElement);

DOM中使用e.currentTarget属性引用注册了事件的对象。
IE兼容实现中在涉及拖放等鼠标事件的时候，需要使用setCapture()和releaseCapture()方法来捕获鼠标事件，
当setCapture()调用的元素的鼠标事件被中断，则会触发onlosecapture事件。

DOM2中还可以把对象注册为事件句柄（IE9开始支持），只需要给对象定义一个handleEvent()方法并传递，模拟实现如下：

function regObjEventHandler(n,tp,listener,captures){
    n.addEventListener(tp,function(event){listener.handleEvent(event);},captures);
}

DOM事件细节

keypress事件在W3C中，按下不能打印的功能按键（如Enter、F1）也会触发，但IE兼容实现中只有当按键有可打印字符或者一个控制字符时才触发。
通用规则是keydown事件对于功能按键，例如Backspace等来说是最有用的，keypress事件对于可打印按键来说是最有用的。
IE兼容实现中，Alt按键组合被认为是无法打印，不会产生keypress事件。
通常需要实现一个Keymap键盘映射，在HTML元素上配置Keymap；在元素上配置键盘映射则注册onkeydown和onkeypress事件。

Cookie存储

Cookie的属性expires指定cookie的生存期，为一个GMT格式的日期；也可以通过新的属性max-age取代，max-age使用秒来设置cookie的生存期，max-age设置为0来删除cookie。
Cookie的属性path指定了于cookie关联的网页，通常设置为"/"。
Cookie的属性domain指定了cookie关联的域名，对于存在子域的网站来说这个属性很有必要。
Cookie的属性secure指定了cookie是否只在HTTPS下传输，为一个布尔值。

创建一个cookie可能的样子如下（cookie值不能含有分号、逗号或空白符）：

var dt=new Date();
dt.setFullYear(dt.getFullYear()+1);
document.cookie="version="+encodeURIComponent(document.lastModified)+"; expires="+dt.toGMTString();

function getCookie(nm){
    var sreg="(?:^|;[ ]*)"+nm+"=([^;]*);?";
    var ore=new RegExp(sreg);
    if(ore.test(document.cookie)){
        return decodeURIComponent(RegExp.$1);
    }
    else{
        return null;
    }
}

隐藏框架通信

父窗口可以对iframe的URL进行读写，firame可以对父窗口的URL进行写（跨域则不可读取），通过改变URL的hash部分来实现数据传递。
子iframe可以通过setInterval()来监听是否有数据，也可以通过父窗口修改iframe的大小，来触发iframe的onresize事件来通知；
跨域情况下，子iframe将想要传递的数据写入父窗口的URL的hash后，父窗口通过setInterval()来监听是否有数据传输进来。
另外window.onhashchange事件是很不错的监听选择，但IE67不支持。
对于URL长度的限制问题，可以通过分段的方式解决。

AJAX异步通信

 XMLHttpRequest对象的创建，需要兼容IE的ActiveXObject：

var ctXHR=function(){
    try{return new XMLHttpRequest();}catch(e){}
    try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}
    try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}
    return null;
};

创建好XHR对象后通过xhr.open("GET",uri,true)方法来打开发送请求。
之后可以通过xhr.setRequestHeader("If-Modified-Since","12/21/2011")等来设置请求头；另外可以通过xhr.getResponseHeader来获取接收后的头信息。
最后通过xhr.send(parm)来发送AJAX请求。
可以通过xhr.onreadystatechange=function(){}来异步触发响应。

XMLHttpRequest对象的属性：

属性	说明
onreadystatechange	AJAX状态改变时候会触发该回调函数
readyState	0表示未调用open()方法，1表示正在加载未调用send()方法，2表示已经调用send()方法但未收到响应，3表示接收到部分响应，4表示接收完毕或者中断
status	服务端HTTP码，例如200
statusText	HTTP状态码响应文本，例如404 not found
responseText	服务端的响应，作为一个字符串
responseXML	服务端的响应，表示为XML，服务器必须使用text/xml来标识

对于POST方法，发送的时候可以设置头信息为：

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

对于AJAX的取消，可以通过xhr.abort()方法来取消，若超时之前已经AJAX执行完毕，要记得clearTimeout(timer)来取消定时器。