《 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屬性。