javascript权威指南第六版学习笔记-客户端javascript(2)

来源:互联网 发布:上海希格斯网络 金融 编辑:程序博客网 时间:2024/05/16 17:02

事件驱动的javascript:
  事件都有名字,指示发生事件的通用类型,事件还有目标,它是一个对象,并且事件就是在它上面发生的。当我们谈论事件的时候必须指定事件类型和目标,如果想要程序响应

一个事件,写一个函数,叫做“事件处理程序”、“事件监听器”或“回调”,然后注册这个函数,可以通过html属性来注册,但不鼓励这种写法,

  按照约定,事件处理程序的属性名字是以“on”开始,后面跟着事件的名字

  对于大部分浏览器的大部分事件来说,会把一个对象传递给事件处理程序作为参数,那个对象的属性提供了事件的详细信息(在ie这些事件信息被存储在全局event对象,而不是传递给处理程序函数),事件处理程序的返回值有时用来指示函数是否充分处理了事件。

 有些事件的目标是文档元素,它们会经常往上传递给文档树,例如:如果用户在<button>元素上单击鼠标,单击事件就会在按钮上触发,如果注册在按钮上的函数没有处理(并且停止冒泡)该事件,事件会冒泡到按钮嵌套的容器元素。这样,任何注册在容器元素上的单击事件都会调用。

 如果需要为一个事件注册多个事件处理程序函数,或者想要写一个可以安全 注册事件处理程序的代码模块,就算另一个模块已经为相同的目标上的相同事件注册了一个处理程序,也需要用到另一种事件处理程序注册技术。大部分可以成为事件目标的对象都有一个叫做addEventListener()的方法,允许注册多个监听器。目前只有在IE9里实现了addEventListener(),在IE8 及以前的版本必须使用一个相似的方法attachEvent

   <script>

   window.onload = function () {
            alert('ad');
            var btn = document.getElementById("anniu1");
            if (btn.addEventListener) {
                btn.addEventListener("click", function () { alert("jianting 1 ") }, false);
                btn.addEventListener("click", function () { alert("jianting 2"), false });
            } else {

                btn.attachEvent("onclick", function () { alert("attacheEvent 1") });
                btn.attachEvent("onclick", function () { alert("attachEvent 2") });

            }
        }

</script><script>alert('ad');</script>

 客户端的javascript还使用异步通知类型,这些类型往往不是事件。如果window的onerror属性为一个函数,会在发生javascript错误的时候调用函数,还有setTimeOut()和setInterval()函数,传递给setTimeOut()的函数和真实事件处理程序的注册不同,他们通常叫做“回调逻辑“而不是处理程序。但是他们和事件处理程序一样也是异步的

    客户端javascript的线程模型:

 javascript语言核心并不包含任何线程机制,并且客户端javascript传统上也没定义任何线程机制。HTML5定义了一种作为后台线程的”WebWorker“,但是客户端javascript还像严格的单线程一样操作。单线程编程是为了让编程更加简单。可以确保两个事件处理程序不会同一时刻运行,所以不必担心锁,死锁,竞态条件

 单线程执行意味着浏览器必须在脚本和事件处理程序执行的停止响应用户输入

 

HTML5 定义了一种并发的控制方式,叫做”Web Worker“,它是用来执行计算密集任务而不冻结用户界面的后台线程,运行在web worker 线程里的代码不能访问文档内容,不能和主线程和其他worker共享状态。

 客户端javascript的时间线:

  1:Web浏览器创建Document对象,并且开始解析Web页面,解析Html元素和他们的文本内容后添加Element对象和Text节点到文档中,这个阶段document.readyState的属性是”loading“。

   2:当HTMl解析器遇到没有async和defer属性的<script>元素时,他把这些元素添加到文档中,然后执行行内或外部脚本。这些脚本会同步执行,并且在脚本下载和执行时解析器会暂停。这样脚本就可以用document.write()把文本插入到输入流中。解析器恢复时这些文本会成为文档的一部分。

  3当解析器遇到async属性的<script>时它开始下载脚本文件,并继续解析文档,脚本会在下载完后尽快执行,解析器没有停下来等他下载,异步脚本禁止使用document.write()

4 当文档完成解析,document.readyState属性成为”interactive“

5,所有有defer属性的脚本,会按他们在文档里的顺序执行。异步脚本可能也在这个时间执行,延迟脚本能访完整的文档树,禁止使用document.write();

6.浏览器在Document对象上触发DOMContentLoaded事件。这标志着程序从同步脚本执行阶段转换到了异步事件驱动阶段。但要主要,这时可能还会有异步脚本没有执行完

7这时文档以全部解析完成,但是浏览器还在等待其他内容载入,如图片,当所有这些内容完成载入时,并且所有异步脚本完成载入和执行,document.readyState属性改变为complete,window浏览器触发window对象的load事件

8,从此刻起,会调用异步事件,以异步相应用户输入事件,网络事件,计时器等

 

 

 

 

 

0 0
原创粉丝点击