事件、时间线 博客分类： javascript

1、事件

        当脚本被载入浏览器时，脚本里的javascript代码只会执行一次，为了可以交互，程序需要定义事件——web浏览器先注册javascript函数，并在之后调用它作为事件的响应。javascript通过将函数赋值给Element属性（例如，onclick、onmouseover）来注册事件。如果函数比较短，还可以直接定义在html中，例如，下面是复选框的事件处理：

<input type="checkbox" name="options" value="giftwrap"
    onchange="order.options.giftwrap=this.checked;">

         当然，一般不要将javascript代码放在html中。

        事件都有名字，如click、change、mouseover、keypress、readystatechange等。注册事件常常用类似于下面的简单代码就可以实现。

window.onload=function(){... ...}
document.getElementById("button1").onclick=function(){... ...}
function handleResponse(){... ...}
request.onreadystatechange = handleResponse;

 

2、时间线

        step 1 、web浏览器创建Document对象，并开始解析web页面，它将Html元素和文本存储到Element对象和Text节点中。这时document.readyState的对象是“loading”。

        step 2、遇到<javascript>元素时，开始下载脚本文本，并解析、执行。解析完成后。document.readyState的状态变为“interactive”。

        step 3、浏览器在Document对象上触发DOMContntLoaded事件。

        step 4、文档解析完成但是可能其他内容还没有还没有载入（如图片等），当所有内容都载入，脚本完成执行，document.readyState属性为“complete”，Web浏览器触发Window对象上的load事件。

        step 5、此刻起，会调用异步事件，以异步响应用户输入事件、网络事件、计时器过期等。