JavaScript学习笔记（二）——客户端JavaScript

怪异模式和标准模式，MS在发布IE6时，为了兼容IE5定义的两种不同的渲染模式。渲染模式的选择依赖于HTML文件顶部的DOCTYPE声明（没有DOCTYPE将按照怪异模式渲染）。

如果以0毫秒的超时时间来调用setTimeout()，那个指定的函数不会立即执行，而是把它放在队列中，等到前面处于等待状态的事件处理程序全部执行完后，再调用它。

Window对象的location属性引用的是Location对象，Document对象的location属性也引用的是Location对象，表示当前显示的文档的URL，所以有

window.location === document.location

总是返回true。

HTML文档中使用的id属性会成为可以被脚本访问的全局变量，比如在HTML中有

<button id="demo">click</button>

元素，则在JS中

console.log(demo.innerHTML)

，会输出

click

。但如果window对象已经有该id名字的属性（如history、location、navigator）或显式的将它赋值（声明变量），则将会被覆盖。

HTML的name属性只有在少数元素中有效，包括表单，表单元素，iframe和img元素。

getElementsByName()

可以选取基于name属性的元素，但在IE中，

getElementsByName()

也返回id属性匹配指定值的元素。

Document对象、它的Element对象和文档中表示文本的Text对象都是Node对象。Node对象定义了一下几个属性：parentNode（父节点）、childNodes（只读的类数组对象，字节点）、firstChild（子节点中的第一个）、lastChild（子节点中的最后一个）、nextSibling（兄弟节点中的下一个）、previoursSibling（兄弟节点中的上一个）。

查询浏览器窗口的滚动条位置，可以通过Window对象的

pageXOffset

和

pageYOffset

属性获取（IE8及更早版本不支持），IE或其他所有浏览器可以通过

scrollLeft

和

scrollTop

属性来获取。注意：如果查询文档根节点的垂直距离（或水平距离），可以通过

document.documentElement.scrollTop

获取，但怪异模式下，要通过

document.body.scrollTop

获取。查询窗口大小通过

innerWidth

、

innerHeight

（IE8及更早浏览器不支持）和

clientWidth

、

clientHeight

（IE或其他所有浏览器）获取，也存在怪异模式，与上面处理方式一样。

W3C盒子模型包括：margin、border、padding、content（content不包含其他部分），IE盒子模型包括：margin、border、padding、content（content包含border和padding）。

事件类型是一个用来说明发生了什么类型事件的字符串，事件对象是与特定事件相关且包含有关该事件详细信息的对象，事件对象作为参数传递给事件处理的函数（IE8及之前的版本要通过全局变量event才能得到）。所有事件对象都有用来指定事件类型的type属性和指定事件目标的target属性（IE8及之前版本用srcElement而非target）。事件传播是浏览器决定那个对象触发其事件处理程序的过程，对于单个对象的特定事件，必须是不能传播的。

注册事件处理程序：

addEventListener()

（W3C）、

attachEvent()

（IE8及之前版本）。还可以通过设置事件目标的属性来绑定处理函数，属性名由”on”加上事件名组成，事件名都是小写。设置事件属性只能绑定一个处理程序，如果想绑定多个处理程序，则要使用

addEventListener()

或

attachEvent()

。还可以通过HTML标签属性绑定（不推荐）。

addEventListener()接受3个参数，第一个参数是要注册处理程序的事件类型（没有”on”），第二个参数是当指定事件发生时应该执行的函数，第三个参数为一个boolean值，通常情况下，传false，如果传递了true，将注册捕获事件处理程序。使用相同的参数在同一个对象上多次调用addEventListener()是没有的，注册程序只注册一次。与它相对的方法是

removeEventListener()

，同样接受3个参数。

attachEvent()有2个参数，第一个参数传事件类型（事件名之前要加”on”，如

onclick

），第二参数传处理程序函数。attachEvent()允许相同的事件处理程序函数注册多次，注册函数的调用次数与注册次数一样。与它相对的方法是

detachEvent()

。

通过事件属性和addEventListener()注册事件处理程序时，在处理程序内部，this关键字指的是事件目标，但通过attachEvent()注册时，处理程序内部this关键字指的是全局（window）对象。

通过设置对象属性或HTML属性注册事件处理程序的返回值有时候是非常有意义的，通常情况下，事件处理程序返回false就是告诉浏览器不要执行这个事件相关的默认操作。

事件调用顺序：通过设置对象属性或HTML属性注册的处理程序一直优先调用；使用addEventListener()注册的处理程序按照它们的注册顺序调用；使用attachEvent()注册的处理程序可能按照任何顺序调用。

事件传播：事件”冒泡”调用目标的父元素的事件处理程序，然后调用目标祖父的事件处理程序，一直到Document对象，最后到Window对象。发生在文档元素的大部分事件都会冒泡，但focus、blur、scroll事件是例外。文档元素的load事件会冒泡，但它会在Document对象上停止而不会传播到Window对象。事件冒泡是事件传播的第三个阶段，目标对象调用处理程序是第二个阶段，第一个阶段甚至发生在目标处理程序之前，称为“捕获”阶段（IE8及之前版本不支持捕获阶段）。

事件取消：属性注册的事件处理程序返回false取消浏览器默认操作，addEventListener()通过调用事件对象（event）的preventDefault()方法取消事件的默认操作，在IE8及之前版本中，设置事件对象 （window.event）的returnValue属性为false来取消事件默认操作。

取消事件传播：在addEventListener()中，通过调用事件对象（event）的stopPropagation()方法阻止事件传播；在IE8及之前版本中，设置事件对象（window.event）的cancelBubble属性为true来阻止事件传播（只能阻止冒泡，因为支持捕获）。

鼠标事件中除了mouseenter、mouseleave外都支持冒泡。禁止默认浏览器右键菜单弹出可以使用：

document.oncontextmenu = function(){ return false }

。