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 }。