《 JavaScript程序设计》—— 第六章事件

时间 2019-11-08

原文原文链接

6.1

6.1.1

在研究受事件驱动的程序时，倾向于关注四个机制

由于许多事件都与人们能够看到的用户界面元素（按钮、文本字段、滑动块）相关联，因此事件驱动计算的一个关键要素就是用于定义用户界面元素的机制
因为检测到的事件常常会引用或修改一个脚本内的其余用户界面元素，因此应当提供一种一编程方式访问用户界面元素的机制。
由于用户界面元素要响应事件——包括但不限于单击鼠标、鼠标移动、击键、语音与手势检测、键盘焦点改变、时间流逝、网络数据到达，因此事件驱动的系统提供一种用于指定代码的机制，再出发特定事件时执行此代码。
许多事件都伴有补充信息。例如鼠标事件涉及鼠标坐标、一个或多个鼠标按钮；键盘事件涉及一个特定键，还可能有一个或多个修改键。所以事件驱动的系统提供一种用于读取事件专属信息的机制。

6.2定义用户界面元素

以前曾提到，JavaScript的设计就是要内嵌在托管系统中，好比Web服务器、图像编辑器、字处理器和相似系统。当这些系统的用户界面元素产生某些事件时，会运行特定的JavaScript代码以做响应。尽管JavaScript并无本身定义这些元素，但它却提供了一种很是好的功能，能够将函数用做对象的属性，与这些用户界面元素彻底对应。javascript

例如，在一个Web环境中，这些元素是经过以HTML编写的结构化文档来提供的，这些文档或者由Web服务器经过互联网提供，或者做为.html文件存储在本地计算机上，而后由Web渲染器为咱们熟悉的可视形式。没有JavaScript，这些页面就是静态的，也就是说，一旦加载，它们的内容就不能改变。改变显示内容的惟一方法就是单击一个连接，为一个新页面从新启动"连接——渲染"周期。利用JavaScript，web页面得到了触发自我修改的能力，从而能够根据用户与页面内容的互动变为动态的。html

6.2.1 Web页面是结构化文档

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>     
    <body>
        <h1>Temperature Conversion</h1>
        <p>
            <input type="text" id="temperature" />
            <input type="button" id="f_to_c" value="F to C" />
            <input type="button" id="c_to_f" value="C to F" />
        </p>
        <!-- Computation result will go here-->
        <p id="result"></p>
        <script src="img/js/js_test.js"></script>
    </body>
</html>

如上面这段"温度转换器"的Web页面的节点结构。java

HTML定义了一组可供使用的节点和属性，还有用于构建正确结构的规则。建立HTML文档的一般形式是：编写一系列用标签表示元素的字符，这些标签或者为开始标签、结束标签或者为空标签。
定义HTML语法的全套规则很是复杂，但咱们能够由如下规则入门。node

文档的开头应当是一个文档类型声明，告诉浏览器但愿使用哪一种HTML版本，目前通常都是HTML5.web
Web页面应当仅包含一个html元素，它刚好由两部分组成，其顺序为：head元素后面跟有一个body元素。编程
头元素中包含文档的相关信息，其中有一些子元素，用于表示页面标题（title）、到其余web资源的连接（link）、样式信息（style）、脚本（script）、通常信息（meta）及其余。强烈建议提供一个meta元素，做为head的第一个子元素，告诉浏览器，你的文档存储时采用了哪一种字符编码。数组
主体中包含文本元素和块元素。文本能够用行内元素标记，这些元素可用于如下目的：表示强调（em）、着重强调（strong）、匿名（abbrev）、引用（q）、引文（cite）、上标（sup）、下标（sub）、到其余文档的连接（a）、通常内置跨区（span）等等。浏览器
有几个用于表示多媒体内容的元素，其行为方式也与行内元素相同：img、audio、video、object、embed。audio和video是HTML5新增元素；object和embed用于浏览器插件的百宝囊元素。服务器
一些元素设计上须要子组件：有序、无序列表li；定义列表dt和dd；表格表头thead、主体tbody、页脚tfoot、每个都有行tr，单元格能够是标题th,也能够是正常表格数据td。网络
经典的用户界面元素：input（button、text）、select、textarea、单选radio、复选checkbox等等。
HTML5引入了outpt、keygen、progress、meter、command，还有其余一些input类型，如number、date、email。
一些元素既能够出如今标题中，也能够出如今主体中，一些元素既能够充当块元素，也能够充当行内元素。

咱们将注意力放在程序设计上，特别是放在事件驱动的程序设计上，因此重点还在JavaScript。

6.3 以编程方式访问用户界面元素

下面将说明JavaScript如何使用一种称为文档对象模型（Document Object Model,DOM）的“桥接技术”来读写这一用户界面，并进行处理。

6.3.1 `document`对象

document就是一种宿主对象，能够在任什么时候间、任何位置供Web浏览器中运行的任何JavaScript代码使用。

alert(document)

至少，它向你证实了：JavaScript不用费什么力气就能看到document，只需用名字调用它便可。如今再简单看看document的一些属性。

var i = 0;
        for (var prototy in document) {
            console.log(prototy);
            i++;
            if (i>4) {
                break;
            }
        };

[Web浏览器] "vlinkColor" /javascript/test.html (11)
[Web浏览器] "linkColor" /javascript/test.html (11)
[Web浏览器] "alinkColor" /javascript/test.html (11)
[Web浏览器] "fgColor" /javascript/test.html (11)
[Web浏览器] "bgColor" /javascript/test.html (11)
看到了控制台内的输出，每一个都有一个属性名，好比bgColor、width或getElementById。这里没法给出一个肯定不变的列表，由于不一样浏览器可能会按不一样的顺序列出document的属性，甚至包含一些其余浏览器不被支持的属性。
i计数器将console.log的属性名称限制为仅有五个，有一种更方便的方式查看document的全部属性名称。

for (var property in document) {
            document.write("<div>"+property+"</div>");
        }

注意上面代码如何改变了web窗口中的实际内容。这是document的关键属性之一，它被直接“连线”到一个web页面。document中的write函数将给定字符串直接发送个页面；咱们用这个函数逐字写出其内容。若是在处理页面的同时调用write，它的行为更像是一个打字员，向当前页面注入HTML，可是若是在加载页面以后在调用write，将会建立一个新的空白web页面，并向其添加文本。
不难想象一个函数能够怎样修改web浏览器的内容。毕竟是一个函数，能够轻松的包含代码，用于修改显示内容。

var footer = document.getElementById("footer");
        footer.innerHTML = "<h3>document properties:</h3>";
        var properties = [];
        for (var property in document) {
            properties.push(property+" ");
        }
        footer.innerHTML = "<p>"+properties.join("<br/>")+"</p>"

这个脚本中，document.getElementById("footer")返回运行期页面的一些元素，但这并非什么非同寻常的事情。注意，其中只有一次赋值操做，就是为这个对象的innerHTML属性指定了一个字符串，而这一赋值操做改变了web页面，其效果立刻就显示了出来。这样就使JavaScript与相关文档之间的互动显得很是天然，富有凝聚力:设定一个值，立刻就能看到结果。

6.3.4 操控用户界面空间

Web页面决定着JavaScript的生存周期，当Web页面被关闭、刷新、替换，由下一页面上的DOM脚本/变量接管时，对象、变量、函数和全部其余一切都将被抛弃。这就是"JavaScript"的生命轮回。

6.3.6 遍历`DOM`

对document宿主对象再作一点深刻剖析。咱们已经看到，document是JavaScript代码借以修改或更新Web页面的渠道。这个宿主对象表示的就是文档树顶部的文档节点，事实上，这些树中的全部节点都是用JavaScript宿主对象表示的；和全部对象同样，它们拥有属性。DOM对象，包括document自身，具备如下一个或多个属性。

nodeType：1~12范围内的一个整数，用来描述节点的类型。例如：1表示元素，3表示文本，8表示注释，9表示文档节点自己
nodeValue：节点的内容，如文本节点中的文本。
childNodes：一个与数组相似的对象，其中childNodes[0]引用了该对象的第一个子节点，childNodes[1]引用第二个，以此类推。每一个子节点又能够拥有本身的childNodes属性。

有一些DOM对象就是元素（`nodeType===1`）,它们有两个颇有用的属性。

tagName：元素的名字
attributes：一个相似于数组的对象，其中包含"名称-值对"形式的属性。

《 JavaScript程序设计》—— 第六章事件

6.1

6.1.1

在研究受事件驱动的程序时，倾向于关注四个机制

由于许多事件都与人们能够看到的用户界面元素（按钮、文本字段、滑动块）相关联，因此事件驱动计算的一个关键要素就是用于定义用户界面元素的机制

因为检测到的事件常常会引用或修改一个脚本内的其余用户界面元素，因此应当提供一种一编程方式访问用户界面元素的机制。

由于用户界面元素要响应事件——包括但不限于单击鼠标、鼠标移动、击键、语音与手势检测、键盘焦点改变、时间流逝、网络数据到达，因此事件驱动的系统提供一种用于指定代码的机制，再出发特定事件时执行此代码。

许多事件都伴有补充信息。例如鼠标事件涉及鼠标坐标、一个或多个鼠标按钮；键盘事件涉及一个特定键，还可能有一个或多个修改键。所以事件驱动的系统提供一种用于读取事件专属信息的机制。

6.2定义用户界面元素

6.2.1 Web页面是结构化文档

6.3 以编程方式访问用户界面元素

6.3.1 `document`对象

6.3.4 操控用户界面空间

Web页面决定着JavaScript的生存周期，当Web页面被关闭、刷新、替换，由下一页面上的DOM脚本/变量接管时，对象、变量、函数和全部其余一切都将被抛弃。这就是"JavaScript"的生命轮回。

6.3.6 遍历`DOM`

`nodeType`：1~12范围内的一个整数，用来描述节点的类型。例如：1表示元素，3表示文本，8表示注释，9表示文档节点自己

`nodeValue`：节点的内容，如文本节点中的文本。

`childNodes`：一个与数组相似的对象，其中`childNodes[0]`引用了该对象的第一个子节点，`childNodes[1]`引用第二个，以此类推。每一个子节点又能够拥有本身的childNodes属性。

有一些DOM对象就是元素（`nodeType===1`）,它们有两个颇有用的属性。

`tagName`：元素的名字

`attributes`：一个相似于数组的对象，其中包含"名称-值对"形式的属性。

《 JavaScript程序设计》—— 第六章 事件

6.1

6.1.1

在研究受事件驱动的程序时，倾向于关注四个机制

由于许多事件都与人们能够看到的用户界面元素（按钮、文本字段、滑动块）相关联，因此事件驱动计算的一个关键要素就是用于定义用户界面元素的机制

因为检测到的事件常常会引用或修改一个脚本内的其余用户界面元素，因此应当提供一种一编程方式访问用户界面元素的机制。

由于用户界面元素要响应事件——包括但不限于单击鼠标、鼠标移动、击键、语音与手势检测、键盘焦点改变、时间流逝、网络数据到达，因此事件驱动的系统提供一种用于指定代码的机制，再出发特定事件时执行此代码。

许多事件都伴有补充信息。例如鼠标事件涉及鼠标坐标、一个或多个鼠标按钮；键盘事件涉及一个特定键，还可能有一个或多个修改键。所以事件驱动的系统提供一种用于读取事件专属信息的机制。

6.2定义用户界面元素

6.2.1 Web页面是结构化文档

6.3 以编程方式访问用户界面元素

6.3.1 document对象

6.3.4 操控用户界面空间

Web页面决定着JavaScript的生存周期，当Web页面被关闭、刷新、替换，由下一页面上的DOM脚本/变量接管时，对象、变量、函数和全部其余一切都将被抛弃。这就是"JavaScript"的生命轮回。

6.3.6 遍历DOM

nodeType：1~12范围内的一个整数，用来描述节点的类型。例如：1表示元素，3表示文本，8表示注释，9表示文档节点自己

nodeValue：节点的内容，如文本节点中的文本。

childNodes：一个与数组相似的对象，其中childNodes[0]引用了该对象的第一个子节点，childNodes[1]引用第二个，以此类推。每一个子节点又能够拥有本身的childNodes属性。

有一些DOM对象就是元素（nodeType===1）,它们有两个颇有用的属性。

tagName：元素的名字

attributes：一个相似于数组的对象，其中包含"名称-值对"形式的属性。

《 JavaScript程序设计》—— 第六章事件

6.3.1 `document`对象

6.3.6 遍历`DOM`

`nodeType`：1~12范围内的一个整数，用来描述节点的类型。例如：1表示元素，3表示文本，8表示注释，9表示文档节点自己

`nodeValue`：节点的内容，如文本节点中的文本。

`childNodes`：一个与数组相似的对象，其中`childNodes[0]`引用了该对象的第一个子节点，`childNodes[1]`引用第二个，以此类推。每一个子节点又能够拥有本身的childNodes属性。

有一些DOM对象就是元素（`nodeType===1`）,它们有两个颇有用的属性。

`tagName`：元素的名字

`attributes`：一个相似于数组的对象，其中包含"名称-值对"形式的属性。