`

事件、时间线

 
阅读更多

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、此刻起,会调用异步事件,以异步响应用户输入事件、网络事件、计时器过期等。

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics