JavaScript 高级程序设计第二版

function outputNumbers(count) {
    (function () {
        for (var i =0;i < count; i++) {
            alert(i);
        }
    })();

    alsert(i);    //导致一个错误！
}

块作用域经常，这种技术在全局作用中被用在函数外部，从而限制向全局作用域中添加过多的变量和函数。一般来说，我们都应该尽量少向全局作用域中添加变量和函数。在一个由很多人员共同参与的大型应用程序中，过多的全局变量和函数很容易导致命名冲突。而通过创建私有作用域，每个开发人员即可以使用自己的变量，又不必担心搞乱全局作用域。

JavaScript是单线程语言，但它允许通过设置超时值和间歇时间值来调度代码在特定的时刻执行。

前者是在指定的时间过后执行代码，而后者则是每隔指定的时间就执行一次代码。

var timeoutId = setTimeOut(function, ms);

clearTimeOut(timeoutId);

var intervalId = setInterval(function, ms);

clearInterval(intervalId);

在开发环境中，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。

动态加载脚本

动态加载js

function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

function loadScriptString(code) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    try {
        script.appendChild(document.createTextNode(code));
    }
    catch (ex) {
        script.text = code;
    }

    document.body.appendChild(script);
}

动态加载css

function loadStyles(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

function loadStyleString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    }catch (ex) {
        style.stylesheet.cssText = css;
    }

    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style);
}

11.2.3 元素大小

1. 偏移量

包括元素在屏幕上占用的所有可见的空间。

offsetHeight: 元素在垂直方向上占用的空间大小，单位像素。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。

offsetWidth：元素在水平方向上占用的空间大小，单位像素。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。

offsetLeft：元素的左外边框至包含元素的上内边框之间的像素距离。

offsetTop：元素的上外边框至包含元素的上内边框之间的像素距离。

2. 客户区大小

客户区大小（client dimension）指的是元素内容及其内边距所占据的空间大小。属性：clientWidth和clientHeight。

3. 滚动大小

指的是包含桂东内容的元素的大小。

scrollHeight：在没有滚动条的情况下，元素内容的总高度。

scrollWidth：在没有滚动条的情况下，元素内容的总宽度。

scrollLeft：被隐藏在内容区域左侧的像素数。通过设置这个属性可以改变元素的滚动位置。

scrollTop：被隐藏在内容区域上方的像素数。通过设置这个属性可以改变元素的滚动位置。

注意，对于运行在混杂模式的IE，则需要用document.body代替document.documentElement。

function scrollToTop(element) {
    if (element.scrollTop != 0) {
        element.scrollTop = 0;
    }
}

11.2.2 操作样式表

CSSStyleSheet类型表示的样式表，包括通过<link>元素包含的样式表和在<style>元素中定义的样式表。它们分别是由HTMLLinkElement和HTMLStyleElementHTML类型表示的。

function getStyleSheet(element) {
return element.sheet || element.styleSheet; //styleSheet针对IE
}

//跨浏览器插入规则，可以使用如下函数
function insertRule(sheet, selectorText, cssText, position) {
    if (sheet.insertRule) {
        sheet.insertRule(selectorText + "{" + cssText + "}", position);
    }else if (sheet.addRule) {
        sheet.addRule(selectorText, cssText, position);
    }
}

//跨浏览器删除样式
function deleteRule(sheet, index) {
    if (sheet.deleteRule) {
        sheet.deleteRule(index);
    } else if (sheet.removeRule) {
        sheet.removeRule(index);
    }
}

12.1.3 DOM事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件作出响应。

12.2 事件处理程序（或事件侦听器）

跨浏览器的事件处理。默认采用DOM0方法。

var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent(type, handler, false);
        } else {
            element["on" + type] = handler;
        }
    },

    getEvent: function(event) {
        return event ? event :window.event;
    },
    getTarget: function(event) {
        return event.target || event.srcElement;
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    }


    removeHandler: function(elemet, type, handler) {
        if (elemet.removeEventListener) {
            elemet.removeEventListener(type, handler, false);
        } else if (elemet.detachEvent) {
            element.detachEvent(type, handler, false);
        } else {
            elemet["on" + type] = null;
        }
    }

   stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
         } else {
            event.cancelable = true;
    }
}

};

只有cancelable属性设置为true的事件，才可以使用preventDefault()来取消其默认行为。另外，stopPropagation()方法用于立即停止事件在DOM层次中的传播，即取消进一步的事件捕获或冒泡。

事件对象的eventPhase属性，可以用来确定事件当前正位于事件流的哪个阶段。如果是在捕获阶段调用的事件处理程序，那么eventPhase等于1；如果事件处理程序处于目标对象上，则eventPhase等于2；如果是在冒泡阶段调用的事件处理程序，eventPhase等于3.

12.4 事件类型

不同的事件类型具有不同的信息，而“DOM2级事件”规定了5中事件：

· UI（User Interface，用户界面）事件，在用户与页面上的元素交互时触发；

· 鼠标事件，当用户通过鼠标在页面上执行操作时触发；

· 键盘事件，当用户通过键盘在页面上执行操作时触发；

· HTML事件，当浏览器窗口发生变化或发生特定的客户端/服务器交互时触发；

· 变动事件，当底层DOM结构发生变化时触发。

12.4.1 UI事件

UI事件主要与元素的焦点相关，而且仅在兼容DOM的浏览器中受到了支持。有3个：

· DOMActive：表示元素已经被用户操作（通过鼠标或者键盘）激活；

· DOMFocusIn：表示元素已经获得了焦点；这是HTML中focus事件的普通版；

· DOMFocusOut：表示元素已经失去了焦点；这是HTML中blur事件的普通版。

支持这几个UI事件的浏览器很少!

12.4.2 鼠标事件

7个鼠标事件：

· click：单击。在用户单击主鼠标按钮或者按下回车键时触发。

· dbclick：双击。

· mousedown：按下鼠标按键。不能通过键盘触发这个事件。

· mouseout：鼠标移出。键盘触发移动不能触发这个事件。

· mouseover：鼠标移入。不能通过键盘触发这个事件。

· mouseup：释放鼠标。不能通过键盘触发这个事件。

· mousemove：鼠标移动。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。所有鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件还会影响其他事件，因为鼠标事件与其他事件是密不可分的关系。

1. 客户区坐标位置

鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。

2. 屏幕坐标位置

通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

3. 修改键

Shift、Ctrl、Alt和Meta（在window键盘中是windows键，在苹果机中是Cmd键），它们经常被用来修改鼠标事件的行为。Dom规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值。如果被按下，则值为true，否则为false。

4. 相关元素

DOM通过event对象的relatedTarget属性提供了相关元素的信息。
var EventUtil = {
    //省略了其他代码

    getRelatedTarget : function(event) {
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else {
            return null;
        }
    }
}