javascript高等程序設計（第三版）進修摘錄下

2019年8月24日 73次阅读来源: 科瑞茲曼

第十章 DOM

1001、每一段標記都可以經由歷程樹中的一個節點來示意：HTML 元素經由歷程元素節點示意，特徵（attribute）經由歷程特徵節點示意，文檔範例經由歷程文檔範例節點示意，而詮釋則經由歷程詮釋節點示意。總共有 12 種節點範例，這些範例都繼承自一個基範例
1002、JavaScript 中的統統節點範例都繼承自 Node 範例，因此統統節點範例都同享着雷同的基礎屬性和要領
1003、統統節點都有的末了一個屬性是 ownerDocument ，該屬性指向示意悉數文檔的文檔節點。這類關聯示意的是任何節點都屬於它地點的文檔，任何節點都不能同時存在於兩個或更多個文檔中。經由歷程這個屬性，我們可以沒必要在節點條理中經由歷程層層回溯抵達頂端，而是可以直接接見文檔節點
1004、假如需要把節點放在 childNodes 列表中某個特定的位置上，而不是放在末端，那末可以運用insertBefore() 要領。這個要領吸收兩個參數：要插進去的節點和作為參照的節點。插進去節點后，被插進去的節點會變成參照節點的前一個同胞節點（ previousSibling ），同時被要領返回。假如參照節點是null ，則 insertBefore() 與 appendChild() 實行雷同的操縱
1005、 replaceChild() 要領吸收的兩個參數是：要插進去的節點和要替代的節點。要替代的節點將由這個要領返回並從文檔樹中被移除，同時由要插進去的節點佔有其位置
1006、假如只想移除而非替代節點，可以運用 removeChild() 要領。這個要領吸收一個參數，即要移除的節點。被移除的節點將成為要領的返回值
1007、要運用這幾個要領必須先取得父節點（運用 parentNode 屬性）。別的，並非統統範例的節點都有子節點，假如在不支撐子節點的節點上挪用了這些要領，將會致使毛病發作
1008、 cloneNode() ，用於豎立挪用這個要領的節點的一個完整雷同的副本。 cloneNode() 要領吸收一個布爾值參數，示意是不是實行深複製
1009、cloneNode() 要領不會複製增加到 DOM 節點中的 JavaScript 屬性，比方事宜處置懲罰遞次等。這個要領只複製特徵、（在明白指定的狀況下也複製）子節點，其他統統都不會複製。IE 在此存在一個 bug，即它會複製事宜處置懲罰遞次，所以我們提議在複製之前最好先移除事宜處置懲罰遞次
1010、末了一個要領是 normalize() ，這個要領唯一的作用就是處置懲罰文檔樹中的文本節點。由於剖析器的完成或 DOM 操縱等緣由，能夠會湧現文本節點不包含文本，或許接連湧現兩個文本節點的狀況。當在某個節點上挪用這個要領時，就會在該節點的子女節點中查找上述兩種狀況。假如找到了空文本節點，則刪除它；假如找到相鄰的文本節點，則將它們合併為一個文本節點
1011、雖然 DOM 範例劃定 Document 節點的子節點可以是 DocumentType 、 Element 、 ProcessingIn-struction 或 Comment ，但另有兩個內置的接見其子節點的疾速體式格局。第一個就是 documentElement屬性，該屬性一直指向 HTML 頁面中的 <html> 元素。另一個就是經由歷程 childNodes 列表接見文檔元素，但經由歷程 documentElement 屬性則能更疾速、更直接地接見該元素
1012、統統瀏覽器都支撐 document.documentElement 和 document.body 屬性
1013、作為 HTMLDocument 的一個實例， document 對象另有一些範例的 Document 對象所沒有的屬性。這些屬性供應了 document 對象所表現的網頁的一些信息。个中第一個屬性就是 title ，包含着<title> 元素中的文本——顯如今瀏覽器窗口的題目欄或標籤頁上。經由歷程這個屬性可以取得當前頁面的題目，也可以修正當前頁面的題目並反映在瀏覽器的題目欄中。修正 title 屬性的值不會轉變 <title>元素
1014、 URL 屬性中包含頁面完整的 URL（即地址欄中顯現的 URL）， domain 屬性中只包含頁面的域名，而 referrer屬性中則保存着鏈接到當前頁面的誰人頁面的 URL。在沒有泉源頁面的狀況下， referrer 屬性中能夠會包含空字符串。統統這些信息都存在於請求的 HTTP 頭部，只不過是經由歷程這些屬性讓我們可以在JavaScrip 中接見它們罷了
1015、當頁面中包含來自其他子域的框架或內嵌框架時，可以設置 document.domain 就非常輕易了。由於跨域安全限制，來自不同子域的頁面無法通過 JavaScript 通信。而通過將每個頁面的document.domain 設置為雷同的值，這些頁面便可以互相接見對方包含的 JavaScript 對象了
1016、假定有一個頁面加載自 www.wrox.com，个中包含一個內嵌框架，框架內的頁面加載自 p2p.wrox.com。由於 document.domain 字符串不一樣，表裡兩個頁面之間沒法互相接見對方的 JavaScript 對象。但假如將這兩個頁面的 document.domain 值都設置為 “wrox.com” ，它們之間便可以通訊了。瀏覽器對 domain 屬性另有一個限定，即假如域名一最先是“鬆懈的”（loose），那末不能將它再設置為“緊繃的”（tight）。換句話說，在將 document.domain 設置為 “wrox.com” 今後，就不能再將其設置回 “p2p.wrox.com” ，不然將會致使毛病
1017、HTMLCollection 對象另有一個要領，叫做 namedItem() ，運用這個要領可以經由歷程元素的 name特徵取得鳩合中的項。對 HTMLCollection 而言，我們可以向方括號中傳入數值或字符串情勢的索引值。在背景，對數值索引就會挪用 item() ，而對字符串索引就會挪用 namedItem()
1018、有一個 document 對象的功用已存在許多年了，那就是將輸出流寫入到網頁中的才。這個才體如今以下 4 個要領中： write() 、 writeln() 、 open() 和 close() 。个中， write() 和 writeln()要領都吸收一個字符串參數，即要寫入到輸出流中的文本。 write() 會原樣寫入，而 writeln() 則會在字符串的末端增加一個換行符（ n ）。在頁面被加載的歷程當中，可以運用這兩個要領向頁面中動態地到場內容
1019、要領 open() 和 close() 離別用於翻開和封閉網頁的輸出流
1020、每一個元素都有一或多個特徵，這些特徵的用處是給出相應元素或其內容的附加信息。操縱特徵的DOM 要領重要有三個，離別是 getAttribute() 、 setAttribute() 和 removeAttribute()
1021、與 getAttribute() 對應的要領是 setAttribute() ，這個要領吸收兩個參數：要設置的特徵名和值。假如特徵已存在， setAttribute() 會以指定的值替代現有的值；假如特徵不存在， setAttribute()則豎立該屬性並設置相應的值
1022、 removeAttribute() ，這個要領用於完整刪除元素的特徵。挪用這個要領不僅會消滅特徵的值，而且也會從元素中完整刪除特徵
1023、運用 document.createElement() 要領可以豎立新元素。這個要領只吸收一個參數，即要豎立元素的標署名。這個標署名在 HTML 文檔中不辨別大小寫，而在 XML（包含 XHTML）文檔中，則是辨別大小寫的
1024、文本節點由 Text 範例示意，包含的是可以照字面詮釋的純文本內容。純文本中可以包含轉義后的HTML 字符，但不能包含 HTML 代碼
1025、可以運用 document.createTextNode() 豎立新文本節點，這個要領吸收一個參數——要插進去節點中的文本
1026、運用 document.createComment() 併為其通報詮釋文本也可以豎立詮釋節點
1027、雖然不能把文檔片斷直接增加到文檔中，但可以將它作為一個“堆棧”來運用，即可以在裏面保存未來能夠會增加到文檔中的節點。要豎立文檔片斷，可以運用 document.createDocumentFragment() 要領
1028、文檔片斷繼承了 Node 的統統要領，平常用於實行那些針對文檔的 DOM操縱。假如將文檔中的節點增加到文檔片斷中，就會從文檔樹中移除該節點，也不會從瀏覽器中再看到該節點。增加到文檔片斷中的新節點一樣也不屬於文檔樹。可以經由歷程 appendChild() 或insertBefore() 將文檔片斷中內容增加到文檔中。在將文檔片斷作為參數通報給這兩個要領時，現實上只會將文檔片斷的統統子節點增加到相應位置上；文檔片斷本身永久不會成為文檔樹的一部份
1029、Attr 對象有 3 個屬性： name 、 value 和 specified 。个中， name 是特徵稱號（與 nodeName 的值雷同）， value 是特徵的值（與 nodeValue 的值雷同），而 specified 是一個布爾值，用以區分特徵是在代碼中指定的，照樣默許的
1030、明白 NodeList 及其“嫡親” NamedNodeMap 和 HTMLCollection ，是從團體上透闢明白 DOM 的癥結地點。這三個鳩合都是“動態的”；換句話說，每當文檔組織發作變化時，它們都邑取得更新。因此，它們一直都邑保存着最新、最準確的信息。從實質上說，統統 NodeList 對象都是在接見 DOM文檔時及時運轉的查詢
1031、平常來講，應當只管削減接見 NodeList 的次數。由於每次接見 NodeList ，都邑運轉一次基於文檔的查詢。所以，可以斟酌將從 NodeList 中取得的值緩存起來
1032、querySelector() 要領吸收一個 CSS 挑選符，返回與該形式婚配的第一個元素，假如沒有找到婚配的元素，返回 null 。
1033、querySelectorAll() 要領吸收的參數與 querySelector() 要領一樣，都是一個 CSS 挑選符，但返回的是統統婚配的元素而不僅僅是一個元素。這個要領返回的是一個 NodeList 的實例
1034、假如傳入了瀏覽器不支撐的挑選符或許挑選符中有語法毛病，querySelectorAll() 會拋出毛病
1035、Selectors API Level 2 範例為 Element 範例新增了一個要領 matchesSelector() 。這個要領吸收一個參數，即 CSS 挑選符，假如挪用元素與該挑選符婚配，返回 true ；不然，返回 false
1036、關於元素間的空格，IE9及之前版本不會返迴文本節點，而其他統統瀏覽器都邑返迴文本節點
1037、支撐 getElementsByClassName() 要領的瀏覽器有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+
1038、新增了 document.hasFocus() 要領，這個要領用於肯定文檔是不是取得了中心
1039、運用 document.readyState 的最恰當體式格局，就是經由歷程它來完成一個指導文檔已加載完成的指導器。支撐 readyState 屬性的瀏覽器有 IE4+、Firefox 3.6+、Safari、Chrome和 Opera 9+
1040、自從 IE6 最先辨別襯着頁面的形式是範例的照樣混淆的，檢測頁面的兼容形式就成為瀏覽器的必要功用。IE 為此給 document 增加了一個名為 compatMode 的屬性，這個屬性就是為了通知開闢人員瀏覽器採納了哪一種襯着形式。就像下面例子中所展現的那樣，在範例形式下， document.compatMode 的值即是 “CSS1Compat” ，而在混淆形式下， document.compatMode 的值即是 “BackCompat”。
1041、HTML5劃定可以為元素增加非範例的屬性，但要增加前綴 data- ，目的是為元素供應與襯着無關的信息，或許供應語義信息。這些屬性可以恣意增加、隨便定名，只需以 data- 開首即可
1042、在讀形式下， innerHTML 屬性返回與挪用元素的統統子節點（包含元素、詮釋和文本節點）對應的 HTML 標記。在寫形式下， innerHTML 會根據指定的值豎立新的 DOM樹，然後用這個 DOM 樹完整替代挪用元素本來的統統子節點
1043、在寫形式下， innerHTML 的值會被剖析為 DOM 子樹，替代挪用元素本來的統統子節點。由於它的值被以為是 HTML，所以个中的統統標籤都邑根據瀏覽器處置懲罰 HTML 的範例體式格局轉換為元素（一樣，這裏的轉換結果也因瀏覽器而異）。假如設置的值僅是文本而沒有 HTML 標籤，那末結果就是設置純文本
1044、 innerHTML 字符串一最先（而且悉數）就是一個“無作用域的元素”，所以這個字符串會變成空字符串
1045、不支撐 innerHTML 的元素有： <col> 、 <colgroup> 、<frameset> 、 <head> 、 <html> 、 <style> 、 <table> 、<tbody> 、<thead> 、<tfoot> 和 <tr> 。另外，在 IE8 及更早版本中， <title> 元素也沒有 innerHTML 屬性
1046、在讀形式下， outerHTML 返回挪用它的元素及統統子節點的 HTML 標籤。在寫形式下， outerHTML會根據指定的 HTML 字符串豎立新的 DOM子樹，然後用這個 DOM 子樹完整替代挪用元素。
1047、由於 IE9 之前的版本與其他瀏覽器在處置懲罰文本節點中的空白符時有差異，因此就湧現了 children屬性。這個屬性是 HTMLCollection 的實例，只包含元素中一樣照樣元素的子節點。除此以外，children 屬性與 childNodes 沒有什麼區分，即在元素只包含元素子節點時，這兩個屬性的值雷同
1048、在現實開闢中，經常需要曉得某個節點是不是是另一個節點的子女。挪用 contains() 要領的應當是先人節點，也就是搜刮最先的節點，這個要領吸收一個參數，即要檢測的子女節點。假如被檢測的節點是子女節點，該要領返回 true ；不然，返回 false 。
1049、innerText 與 textContent 返回的內容並不完整一樣。比方，innerText 會疏忽行內的款式和劇本，而 textContent 則會像返回其他文本一樣返回行內的款式和劇本代碼。防備跨瀏覽器兼容題目的最好門路，就是從不包含行內款式或行內劇本的 DOM 子樹副本或 DOM 片斷中讀取文本
1050、scrollIntoViewIfNeeded(alignCenter) ：只在當前元素在視口中不可見的狀況下，才轉動瀏覽器窗口或容器元素，終究讓它可見。假如當前元素在視口中可見，這個要領什麼也不做。假如將可選的 alignCenter 參數設置為 true ，則示意只管將元素顯如今視口中部（垂直方向）。Safari 和 Chrome 完成了這個要領
1051、在範例形式下，統統器量值都必須指定一個器量單元。在混淆形式下，可以將style.width 設置為 “20” ，瀏覽器會假定它是 “20px” ；但在範例形式下，將style.width 設置為 “20” 會致使被疏忽——由於沒有器量單元。在實踐中，最好一直都指定器量單元
1052、經由歷程 cssText 屬性可以接見style特徵中的CSS代碼。在讀取形式下， cssText 返回瀏覽器對 style特徵中 CSS 代碼的內部示意。在寫入形式下，賦給 cssText 的值會重寫悉數 style 特徵的值；也就是說，之前經由歷程 style 特徵指定的款式信息都將喪失
1053、假如你需要更多信息，可以運用 getPropertyCSSValue() 要領，它返回一個包含兩個屬性的 CSSValue 對象，這兩個屬性離別是： cssText 和 cssValueType 。个中， cssText 屬性的值與 getPropertyValue() 返回的值雷同，而 cssValueType 屬性則是一個數值常量，示意值的範例：0 示意繼承的值，1 示意基礎的值，2 示意值列表，3 示意自定義的值
1054、要從元素的款式中移除某個 CSS 屬性，需要運用 removeProperty() 要領。運用這個要領移除一個屬性，意味着將會為該屬性運用默許的款式（從其他款式表經層疊而來）。比方，要移除經由歷程 style特徵設置的 border 屬性
1055、 getComputedStyle() 要領返回一個 CSSStyleDeclaration 對象（與 style 屬性的範例雷同），个中包含當前元素的統統盤算的款式。IE 不支撐 getComputedStyle() 要領，但它有一品種似的觀點。在 IE 中，每一個具有 style 屬性的元素另有一個 currentStyle 屬性。這個屬性是 CSSStyleDeclaration 的實例，包含當前元素悉數盤算后的款式
1056、不論在哪一個瀏覽器中，最重要的一條是要記着統統盤算的款式都是只讀的；不能修正盤算后款式對象中的 CSS 屬性。另外，盤算后的款式也包含屬於瀏覽器內部款式表的款式信息，因此任何具有默許值的 CSS 屬性都邑表如今盤算后的款式中。比方，統統瀏覽器中的 visibility 屬性都有一個默許值，但這個值會因完成而異
1057、CSSStyleSheet 範例示意的是款式表，包含經由歷程 <link> 元素包含的款式表和在 <style> 元素中定義的款式表
1058、從款式表中刪除劃定規矩的要領是 deleteRule() ，這個要領吸收一個參數：要刪除的劃定規矩的位置
1059、起首要引見的屬性觸及偏移量（offset dimension），包含元素在屏幕上佔用的統統可見的空間。元素的可見大小由其高度、寬度決議，包含統統內邊距、轉動條和邊框大小（注重，不包含外邊距）
1060、統統這些偏移量屬性都是只讀的，而且每次接見它們都需要從新盤算。因此，應當只管防備重複接見這些屬性；假如需要重複運用个中某些屬性的值，可以將它們保存在局部變量中，以進步機能。

第十一章 DOM擴大、第十二章 DOM2和DOM3

1101、querySelector() 要領吸收一個 CSS 挑選符，返回與該形式婚配的第一個元素，假如沒有找到婚配的元素，返回 null
1102、querySelectorAll() 要領吸收的參數與 querySelector() 要領一樣，都是一個 CSS 挑選符，但返回的是統統婚配的元素而不僅僅是一個元素。這個要領返回的是一個 NodeList 的實例。返回的值現實上是帶有統統屬性和要領的 NodeList ，而其底層完成則類似於一組元素的快照，而非不停對文檔舉行搜刮的動態查詢
1103、childElementCount ：返回子元素（不包含文本節點和詮釋）的個數；firstElementChild ：指向第一個子元素； firstChild 的元素版；lastElementChild ：指向末了一個子元素； lastChild 的元素版； previousElementSibling ：指向前一個平輩元素； previousSibling 的元素版；nextElementSibling ：指向後一個平輩元素； nextSibling 的元素版
1104、getElementsByClassName() 要領吸收一個參數，即一個包含一或多個類名的字符串，返回帶有指定類的統統元素的 NodeList。傳入多個類名時，類名的先後遞次不重要。由於返回的對象是 NodeList ，所以運用這個要領與運用 getElementsByTagName()。以及其他返回 NodeList 的 DOM 要領都具有一樣的機能題目。支撐 getElementsByClassName() 要領的瀏覽器有 IE 9+、Firefox 3+、Safari 3.1+、Chrome 和Opera 9.5+
1105、div.classList.remove(“user”) => add(value) ：將給定的字符串值增加到列表中。假如值已存在，就不增加了；contains(value) ：示意列表中是不是存在給定的值，假如存在則返回 true ，不然返回 false；remove(value) ：從列表中刪除給定的字符串；toggle(value) ：假如列表中已存在給定的值，刪除它；假如列表中沒有給定的值，增加它。支撐 classList 屬性的瀏覽器有 Firefox 3.6+和 Chrome
1106、 document.activeElement 屬性，這個屬性一直會援用 DOM 中當前取得了中心的元素。默許狀況下，文檔方才加載完成時， document.activeElement 中保存的是 document.body 元素的援用。文檔加載時期， document.activeElement 的值為 null
1107、 document.hasFocus() 要領，這個要領用於肯定文檔是不是取得了中心。
1108、完成了這兩個屬性的瀏覽器的包含 IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+
1109、運用 document.readyState 的最恰當體式格局，就是經由歷程它來完成一個指導文檔已加載完成的指導器
1110、在範例形式下， document.compatMode 的值即是 “CSS1Compat” ，而在混淆形式下， document.compatMode 的值即是 “BackCompat”
1111、HTML5 新增了 document.head 屬性，援用文檔的 <head> 元素。完成 document.head 屬性的瀏覽器包含 Chrome 和 Safari 5
1112、HTML5劃定可以為元素增加非範例的屬性，但要增加前綴 data- ，目的是為元素供應與襯着無關的信息，或許供應語義信息。這些屬性可以恣意增加、隨便定名，只需以 data- 開首即可
1113、增加了自定義屬性今後，可以經由歷程元素的 dataset 屬性來接見自定義屬性的值。 dataset 屬性的值是 DOMStringMap 的一個實例，也就是一個名值對兒的映照。在這個映照中，每一個 data-name 情勢的屬性都邑有一個對應的屬性，只不過屬性名沒有 data- 前綴（比方，自定義屬性是 data-myname ，那映照中對應的屬性就是 myname ）
1114、在讀形式下， innerHTML 屬性返回與挪用元素的統統子節點（包含元素、詮釋和文本節點）對應的 HTML 標記。在寫形式下， innerHTML 會根據指定的值豎立新的 DOM樹，然後用這個 DOM 樹完整替代挪用元素本來的統統子節點
1115、運用 innerHTML 屬性也有一些限定。比方，在大多半瀏覽器中，經由歷程 innerHTML 插進去 <script>元素並不會實行个中的劇本。IE8 及更早版本是唯一能在這類狀況下實行劇本的瀏覽器，但必須滿足一些前提。一是必須為 <script> 元素指定 defer 屬性，二是 <script> 元素必須位於（微軟所謂的）“有作用域的元素”（scoped element）今後。 <script> 元素被以為是“無作用域的元素”（NoScope element），也就是在頁面中看不到的元素，與 <style> 元素或詮釋類似。假如經由歷程 innerHTML 插進去的字符串開首就是一個“無作用域的元素”，那末 IE 會在剖析這個字符串前先刪除該元素。div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>"
1116、並非統統元素都支撐 innerHTML 屬性。不支撐 innerHTML 的元素有： <col> 、 <colgroup> 、<frameset> 、 <head> 、 <html> 、 <style> 、 <table> 、 <tbody> 、 <thead> 、 <tfoot> 和 <tr> 。另外，在 IE8 及更早版本中， <title> 元素也沒有 innerHTML 屬性
1117、IE8 為此供應了 window.toStaticHTML() 要領，這個要領吸收一個參數，即一個 HTML 字符串；返回一個經由無害處置懲罰后的版本——從源 HTML 中刪除統統劇本節點和事宜處置懲罰遞次屬性
1118、假如在<div>元素上挪用outerHTML，會返回與上面雷同的代碼，包含<div>本身。支撐outerHTML屬性的瀏覽器有IE4+、Safari 4+、Chrome和Opera 8+。Firefox 7及之前版本都不支撐outerHTML屬性
1119、插進去標記的末了一個新增體式格局是 insertAdjacentHTML() 要領。這個要領最早也是在IE中湧現的，它吸收兩個參數：插進去位置和要插進去的 HTML 文本。”beforebegin” ，在當前元素之前插進去一個緊鄰的平輩元素；”afterbegin” ，在當前元素之下插進去一個新的子元素或在第一個子元素之前再插進去新的子元素；”beforeend” ，在當前元素之下插進去一個新的子元素或在末了一個子元素今後再插進去新的子元素；”afterend” ，在當前元素今後插進去一個緊鄰的平輩元素。第二個參數是一個 HTML 字符串（與 innerHTML 和 outerHTML的值雷同）。支撐insertAdjacentHTML() 要領的瀏覽器有 IE、Firefox 8+、Safari、Opera 和 Chrome
1120、scrollIntoView() 可以在統統 HTML 元素上挪用，經由歷程轉動瀏覽器窗口或某個容器元素，挪用元素便可以涌如今視口中。假如給這個要領傳入 true 作為參數，或許不傳入任何參數，那末窗口轉動今後會讓挪用元素的頂部與視口頂部只管平齊。假如傳入 false 作為參數，挪用元素會只管悉數涌如今視口中，（能夠的話，挪用元素的底部會與視口頂部平齊）。支撐 scrollIntoView() 要領的瀏覽器有 IE、Firefox、Safari 和 Opera
1121、children這個屬性是 HTMLCollection 的實例，只包含元素中一樣照樣元素的子節點。除此以外，children 屬性與 childNodes 沒有什麼區分，即在元素只包含元素子節點時，這兩個屬性的值雷同。支撐 children 屬性的瀏覽器有 IE5、Firefox 3.5、Safari 2（但有 bug）、Safari 3（完整支撐）、Opera8和 Chrome（統統版本）。IE8 及更早版本的 children 屬性中也會包含詮釋節點，但 IE9 今後的版本則只返回元素節點
1122、挪用 contains() 要領的應當是先人節點，也就是搜刮最先的節點，這個要領吸收一個參數，即要檢測的子女節點。假如被檢測的節點是子女節點，該要領返回 true ；不然，返回 false。支撐 contains() 要領的瀏覽器有 IE、Firefox 9+、Safari、Opera 和 Chrome
1123、多半狀況下，都可以經由歷程簡樸地轉換屬性名的花樣來完成轉換。个中一個不能直接轉換的 CSS 屬性就是 float 。由於 float 是 JavaScript 中的保存字，因此不能用作屬性名。“DOM2 級款式”範例劃定款式對象上相應的屬性名應當是 cssFloat ；Firefox、Safari、Opera 和 Chrome 都支撐這個屬性，而 IE支撐的則是 styleFloat
1124、經由歷程 cssText 屬性可以接見style特徵中的CSS代碼。在讀取形式下， cssText 返回瀏覽器對 style特徵中 CSS 代碼的內部示意。在寫入形式下，賦給 cssText 的值會重寫悉數 style 特徵的值；也就是說，之前經由歷程 style 特徵指定的款式信息都將喪失
1125、getPropertyValue() 要領取得的一直都是 CSS 屬性值的字符串示意。假如你需要更多信息，可以運用 getPropertyCSSValue() 要領，它返回一個包含兩個屬性的 CSSValue 對象，這兩個屬性離別是： cssText 和 cssValueType 。个中， cssText 屬性的值與getPropertyValue() 返回的值雷同，而 cssValueType 屬性則是一個數值常量，示意值的範例：0 示意繼承的值，1 示意基礎的值，2 示意值列表，3 示意自定義的值。在現實開闢中， getPropertyCSSValue() 運用得比 getPropertyValue() 少許多。IE9+、Safarie3+以及 Chrome 支撐這個要領。Firefox 7 及之前版本也供應這個接見，但挪用總返回 null
1126、要從元素的款式中移除某個 CSS 屬性，需要運用 removeProperty() 要領。運用這個要領移除一個屬性，意味着將會為該屬性運用默許的款式（從其他款式表經層疊而來）
1127、getComputedStyle() 要領。這個要領吸收兩個參數：要取得盤算款式的元素和一個偽元素字符串（比方 “:after” ）。假如不需要偽元素信息，第二個參數可以是 null 。 getComputedStyle() 要領返回一個 CSSStyleDeclaration 對象（與 style 屬性的範例雷同），个中包含當前元素的統統盤算的款式。IE 不支撐 getComputedStyle() 要領，但它有一品種似的觀點。在 IE 中，每一個具有 style 屬性的元素另有一個 currentStyle 屬性。這個屬性是 CSSStyleDeclaration 的實例，包含當前元素悉數盤算后的款式。與 DOM 版本的體式格局一樣，IE 也沒有返回 border 款式，由於這是一個綜合屬性。不論在哪一個瀏覽器中，最重要的一條是要記着統統盤算的款式都是只讀的；不能修正盤算后款式對象中的 CSS 屬性。另外，盤算后的款式也包含屬於瀏覽器內部款式表的款式信息，因此任何具有默許值的 CSS 屬性都邑表如今盤算后的款式中
1128、CSSStyleSheet 範例示意的是款式表，包含經由歷程 <link> 元素包含的款式表和在 <style> 元素中定義的款式表。有讀者能夠記得，這兩個元素本身離別是由 HTMLLinkElement 和 HTMLStyleElement 範例示意的。然則， CSSStyleSheet 範例相對越發通用一些，它只示意款式表，而不論這些款式表在 HTML中是怎樣定義的。另外，上述兩個針對元素的範例許可修正 HTML特徵，但 CSSStyleSheet 對象則是一套只讀的接口（有一個屬性破例）。disabled ：示意款式表是不是被禁用的布爾值。這個屬性是可讀/寫的，將這個值設置為 true 可以禁用款式表
1129、个中三個最經常使用的屬性是 cssText 、 selectorText 和 style 。 cssText 屬性與 style.cssText屬性類似，但並不雷同。前者包含挑選符文本和繚繞款式信息的花括號，後者只包含款式信息（類似於元素的 style.cssText ）。另外， cssText 是只讀的，而 style.cssText 也可以被重寫
1130、 insertRule() 要領吸收兩個參數：劃定規矩文本和示意在那裡插進去劃定規矩的索引。Firefox、Safari、Opera 和 Chrome都支撐 insertRule() 要領。IE8 及更早版本支撐一個類似的要領，名叫 addRule() ，也吸收兩必選參數：挑選符文本和 CSS款式信息；一個可選參數：插進去劃定規矩的位置
1131、從款式表中刪除劃定規矩的要領是 deleteRule() ，這個要領吸收一個參數：要刪除的劃定規矩的位置；IE 支撐的類似要領叫 removeRule() ，運用要領雷同。與增加劃定規矩類似，刪除劃定規矩也不是現實 Web 開闢中常見的做法。斟酌到刪除劃定規矩能夠會影響 CSS層疊的結果，因此請人人鄭重運用
1132、偏移量。offsetHeight ：元素在垂直方向上佔用的空間大小，以像素計。包含元素的高度、（可見的）水平轉動條的高度、上邊框高度和下邊框高度；offsetWidth ：元素在水平方向上佔用的空間大小，以像素計。包含元素的寬度、（可見的）垂直轉動條的寬度、左側框寬度和右邊框寬度；offsetLeft ：元素的左外邊框至包含元素的左內邊框之間的像素距離；offsetTop ：元素的上外邊框至包含元素的上內邊框之間的像素距離。要想曉得某個元素在頁面上的偏移量，將這個元素的 offsetLeft 和 offsetTop 與其 offsetParent的雷同屬性相加，云云輪迴直至根元素，便可以取得一個基礎準確的值
1133、統統這些偏移量屬性都是只讀的，而且每次接見它們都需要從新盤算。因此，應當只管防備重複接見這些屬性；假如需要重複運用个中某些屬性的值，可以將它們保存在局部變量中，以進步機能
1134、元素的客戶區大小（client dimension），指的是元素內容及其內邊距所佔有的空間大小。有關客戶區大小的屬性有兩個： clientWidth 和 clientHeight 。个中， clientWidth 屬性是元素內容區寬度加上擺布內邊距寬度； clientHeight 屬性是元素內容區高度加上高低內邊距高度。注重這兩個屬性不包含邊框（border）
1135、與偏移量類似，客戶區大小也是只讀的，也是每次接見都要從新盤算的
1136、有些元素（比方<html> 元素），縱然沒有實行任何代碼也能自動地增加轉動條；但別的一些元素，則需要經由歷程 CSS 的overflow 屬性舉行設置才轉動。scrollHeight ：在沒有轉動條的狀況下，元素內容的總高度；scrollWidth ：在沒有轉動條的狀況下，元素內容的總寬度；scrollLeft ：被隱蔽在內容地區左側的像素數。經由歷程設置這個屬性可以轉變元素的轉動位置；scrollTop ：被隱蔽在內容地區上方的像素數。經由歷程設置這個屬性可以轉變元素的轉動位置
1137、關於不包含轉動條的頁面而言， scrollWidth 和 scrollHeight 與 clientWidth 和clientHeight 之間的關聯並不非常清晰
1138、在肯定文檔的總高度時（包含基於視口的最小高度時），必須取得 scrollWidth/clientWidth 和scrollHeight/clientHeight 中的最大值，才保證在跨瀏覽器的環境下取得準確的結果
1139、經由歷程 scrollLeft 和 scrollTop 屬性既可以肯定元素當前轉動的狀況，也可以設置元素的轉動位置。在元素尚未被轉動時，這兩個屬性的值都即是 0。假如元素被垂直轉動了，那末 scrollTop 的值會大於 0，且示意元素上方不可見內容的像素高度。假如元素被水平轉動了，那末 scrollLeft 的值會大於 0，且示意元素左側不可見內容的像素寬度。這兩個屬性都是可以設置的，因此將元素的scrollLeft 和 scrollTop 設置為 0，便可以重置元素的轉動位置
1140、IE、Firefox 3+、Safari 4+、Opera 9.5及 Chrome為每一個元素都供應了一個 getBoundingClientRect() 要領。這個要領返回會一個矩形對象，包含 4 個屬性： left 、 top 、 right 和 bottom 。這些屬性給出了元素在頁面中相干於視口的位置。然則，瀏覽器的完成稍有差異。IE8 及更早版本以為文檔的左上角坐標是(2, 2)，而其他瀏覽器包含 IE9 則將傳統的(0,0)作為出發點坐標。因此，就需要在一最先搜檢一下位於(0,0)處的元素的位置，在 IE8 及更早版本中，會返回(2,2)，而在其他瀏覽器中會返回(0,0)
1141、關於不支撐 getBoundingClientRect() 的瀏覽器，可以經由歷程其他手腕取得雷同的信息。平常來講， right 和 left 的差值與 offsetWidth 的值相稱，而 bottom 和 top 的差值與 offsetHeight相稱。而且， left 和 top 屬性大抵即是運用本章前面定義的 getElementLeft() 和 getElementTop()函數取得的值
1142、DOM2 級在 Document 範例中定義了 createRange() 要領。在兼容 DOM 的瀏覽器中，這個要領屬於 document 對象。運用 hasFeature() 或許直接檢測該要領，都可以肯定瀏覽器是不是支撐局限
1143、要運用局限來挑選文檔中的一部份，最簡的體式格局就是運用 selectNode() 或 selectNodeContents() 。這兩個要領都吸收一個參數，即一個 DOM 節點，然後運用該節點中的信息來添補局限。个中，selectNode() 要領挑選悉數節點，包含其子節點；而 selectNodeContents() 要領則只挑選節點的子節點
1144、要豎立龐雜的局限就得運用 setStart() 和 setEnd() 要領。這兩個要領都吸收兩個參數：一個參照節點和一個偏移量值。對 setStart() 來講，參照節點會變成 startContainer ，而偏移量值會變成startOffset 。關於 setEnd() 來講，參照節點會變成 endContainer ，而偏移量值會變成 endOffset
1145、運用 insertNode()要領可以向局限選區的最先處插進去一個節點。<span> 恰好被插進去到了 “Hello” 中的 “llo” 前面，而該位置就是局限選區的最先位置。還要注重的是，由於這裏沒有運用上一節引見的要領，結果原始的 HTML 並沒有增加或刪除 <b> 元素。運用這類手藝可以插進去一些協助提醒信息，比方在翻開新窗口的鏈接旁邊插進去一幅圖象
1146、除了向局限內部插進去內容以外，還可以圍繞局限插進去內容，此時就要運用 surroundContents()要領。這個要領吸收一個參數，即圍繞局限內容的節點。在圍繞局限插進去內容時，背景會實行以下步驟：提掏出局限中的內容（類似實行 extractContent() ）；將給定節點插進去到文檔中本來局限地點的位置上；將文檔片斷的內容增加到給定節點中
1147、所謂摺疊局限，就是指局限中未挑選文檔的任何部份。運用 collapse() 要領來摺疊局限，這個要領吸收一個參數，一個布爾值，示意要摺疊到局限的哪一端。參數 true 示意摺疊到局限的出發點，參數 false 示意摺疊到局限的盡頭。要肯定局限已摺疊終了，可以搜檢 collapsed 屬性
1148、可以運用 cloneRange() 要領複製局限。這個要領會豎立挪用它的局限的一個副本。新豎立的局限與本來的局限包含雷同的屬性，而修正它的端點不會影響本來的局限
1149、在運用完局限今後，最好是挪用 detach() 要領，以便從豎立局限的文檔中星散出該局限。挪用detach() 今後，便可以放心腸消除對局限的援用，從而讓渣滓接納機制接納其內存了
1150、IE9、Firefox、Opera、Safari 和 Chrome 全都已完成了“DOM2 級事宜”模塊的中心部份。IE8 是末了一個依然運用其專有事宜體系的重要瀏覽器

第十三章事宜

1301、事宜流形貌的是從頁面中吸收事宜的遞次。但有意義的是，IE 和 Netscape 開闢團隊竟然提出了差不多是完整相反的事宜流的觀點。IE 的事宜流是事宜冒泡流，而 Netscape Communicator 的事宜流是事宜捕捉流
1302、IE 的事宜流叫做事宜冒泡（event bubbling），即事宜最先時由最詳細的元素（文檔中嵌套條理最深的誰人節點）吸收，然後逐級向上流傳到較為不詳細的節點（文檔）
1303、Netscape Communicator團隊提出的另一種事宜流叫做事宜捕捉（event capturing）。事宜捕捉的頭腦是不太詳細的節點應當更早吸收到事宜，而最詳細的節點應當末了吸收到事宜。事宜捕捉的企圖在於在事宜抵達預定目的之前捕捉它
1304、雖然事宜捕捉是 Netscape Communicator 唯一支撐的事宜流模子，但 IE9、Safari、Chrome、Opera和 Firefox 現在也都支撐這類事宜流模子。只管“DOM2 級事宜”範例請求事宜應當從 document 對象最先流傳，但這些瀏覽器都是從 window 對象最先捕捉事宜的。
1305、由於老版本的瀏覽器不支撐，因此很少有人運用事宜捕捉。我們也提議讀者放心腸運用事宜冒泡，在有特別需要時再運用事宜捕捉
1306、“DOM2級事宜”劃定的事宜流包含三個階段：事宜捕捉階段、處於目的階段和事宜冒泡階段。起首發作的是事宜捕捉，為截獲事宜供應了時機。然後是現實的目的吸收到事宜。末了一個階段是冒泡階段，可以在這個階段對事宜做出相應
1307、在 DOM 事宜流中，現實的目的（ <div> 元素）在捕捉階段不會吸收到事宜
1308、多半支撐 DOM事宜流的瀏覽器都完成了一種特定的行動；縱然“DOM2 級事宜”範例明白請求捕捉階段不會觸及事宜目的，但 IE9、Safari、Chrome、Firefox 和 Opera 9.5 及更高版本都邑在捕捉階段觸發事宜對象上的事宜。結果，就是有兩個時機在目的對象上面操縱事宜。IE9、Opera、Firefox、Chrome 和 Safari 都支撐 DOM 事宜流；IE8 及更早版本不支撐 DOM 事宜流。
1309、將事宜處置懲罰遞次設置為 null 今後，再單擊按鈕將不會有任何行動發作
1310、“DOM2級事宜”定義了兩個要領，用於處置懲罰指定和刪除事宜處置懲罰遞次的操縱： addEventListener()和 removeEventListener() 。統統 DOM 節點中都包含這兩個要領，而且它們都吸收 3 個參數：要處置懲罰的事宜名、作為事宜處置懲罰遞次的函數和一個布爾值。末了這個布爾值參數假如是 true ，示意在捕捉階段挪用事宜處置懲罰遞次；假如是 false ，示意在冒泡階段挪用事宜處置懲罰遞次
1311、經由歷程 addEventListener() 增加的事宜處置懲罰遞次只能運用 removeEventListener() 來移除；移除時傳入的參數與增加處置懲罰遞次時運用的參數雷同。這也意味着經由歷程 addEventListener() 增加的匿名函數將沒法移除。把傳入的匿名函數賦給一個變量，在增加事宜監聽或移除事宜監聽運用該變量可以移除
1312、大多半狀況下，都是將事宜處置懲罰遞次增加到事宜流的冒泡階段，如許可以最大限制地兼容種種瀏覽器。最好只在需要在事宜抵達目的之前截獲它的時候將事宜處置懲罰遞次增加到捕捉階段。假如不是迥殊需要，我們不提議在事宜捕捉階段註冊事宜處置懲罰遞次
1313、IE 完成了與 DOM 中類似的兩個要領： attachEvent() 和 detachEvent() 。這兩個要領吸收雷同的兩個參數：事宜處置懲罰遞次稱號與事宜處置懲罰遞次函數。由於 IE8 及更早版本只支撐事宜冒泡，所以經由歷程attachEvent() 增加的事宜處置懲罰遞次都邑被增加到冒泡階段。注重， attachEvent() 的第一個參數是 “onclick” ，而非 DOM 的 addEventListener() 要領中的 “click”
1314、在 IE 中運用 attachEvent() 與運用 DOM0 級要領的重要區分在於事宜處置懲罰遞次的作用域。在運用 DOM0 級要領的狀況下，事宜處置懲罰遞次會在其所屬元素的作用域內運轉；在運用 attachEvent() 要領的狀況下，事宜處置懲罰遞次會在全局作用域中運轉，因此 this 即是 window
1315、這裏挪用了兩次 attachEvent() ，為統一個按鈕增加了兩個差異的事宜處置懲罰遞次。不過，與 DOM要領差異的是，這些事宜處置懲罰遞次不是以增加它們的遞次實行，而是以相反的遞次被觸發
1316、運用 attachEvent() 增加的事宜可以經由歷程 detachEvent() 來移除，前提是必須供應雷同的參數。與 DOM 要領一樣，這也意味着增加的匿名函數將不能被移除。不過，只需可以將對雷同函數的援用傳給 detachEvent() ，便可以移除相應的事宜處置懲罰遞次
1317、在觸發 DOM 上的某個事宜時，會發生一個事宜對象 event ，這個對象中包含着統統與事宜有關的信息。包含致使事宜的元素、事宜的範例以及其他與特定事宜相干的信息。比方，鼠標操縱致使的事宜對象中，會包含鼠標位置的信息，而鍵盤操縱致使的事宜對象中，會包含與按下的鍵有關的信息。統統瀏覽器都支撐 event 對象，但支撐體式格局差異
1318、在事宜處置懲罰遞次內部，對象 this 一直即是 currentTarget 的值，而 target 則只包含事宜的現實目的。假如直接將事宜處置懲罰遞次指定給了目的元素，則 this 、 currentTarget 和 target 包含雷同的值。假如事宜處置懲罰遞次存在於按鈕的父節點中（比方 document.body ），那末這些值是不雷同的
1319、事宜託付是經由歷程事宜冒泡來完成的
1320、要阻撓特定事宜的默許行動，可以運用 preventDefault() 要領。比方，鏈接的默許行動就是在被單擊時會導航到其 href 特徵指定的 URL。假如你想阻撓鏈接導航這一默許行動，那末經由歷程鏈接的onclick 事宜處置懲罰遞次可以作廢它
1321、只要 cancelable 屬性設置為 true 的事宜，才可以運用 preventDefault() 來作廢其默許行動
1322、 stopPropagation() 要領用於馬上住手事宜在 DOM 條理中的流傳，即作廢進一步的事宜捕捉或冒泡
1323、事宜對象的eventPhase屬性，可以用來肯定事宜當前正位於事宜流的哪一個階段。假如是在捕捉階段挪用的事宜處置懲罰遞次，那末 eventPhase 即是 1 ；假如事宜處置懲罰遞次處於目的對象上，則event-Phase即是2；假如是在冒泡階段挪用的事宜處置懲罰遞次， eventPhase 即是 3
1324、只要在事宜處置懲罰遞次實行時期， event 對象才會存在；一旦事宜處置懲罰遞次實行完成， event 對象就會被燒毀
1325、 returnValue 屬性相當於 DOM中的 preventDefault() 要領，它們的作用都是作廢給定事宜的默許行動。只需將 returnValue 設置為 false ，便可以阻撓默許行動
1326、cancelBubble 屬性與 DOM 中的 stopPropagation() 要領作用雷同，都是用來住手事宜冒泡的。由於 IE 不支撐事宜捕捉，因此只能作廢事宜冒泡；但 stopPropagatioin() 可以同時作廢事宜捕捉和冒泡
1327、在 onclick 事宜處置懲罰遞次中將 cancelBubble 設置為 true ，便可阻撓事宜經由歷程冒泡而觸發document.body 中註冊的事宜處置懲罰遞次
1328、JavaScript 中最經常使用的一個事宜就是 load 。當頁面完整加載后（包含統統圖象、JavaScript 文件、CSS 文件等外部資本），就會觸發 window 上面的 load 事宜
1329、與 load 事宜對應的是 unload 事宜，這個事宜在文檔被完整卸載后觸發。只需用戶從一個頁面切換到另一個頁面，就會發作 unload 事宜
1330、當瀏覽器窗口被調解到一個新的高度或寬度時，就會觸發 resize 事宜。這個事宜在 window （窗口）上面觸發，因此可以經由歷程 JavaScript 或許 <body> 元素中的 onresize 特徵來指定事宜處置懲罰遞次
1331、關於什麼時候會觸發 resize 事宜，差異瀏覽器有差異的機制。IE、Safari、Chrome 和 Opera 會在瀏覽器窗口變化了 1 像素時就觸發 resize 事宜，然後跟着變化不停重複觸發。Firefox 則只會在用戶住手調解窗口大小時才會觸發 resize 事宜。由於存在這個差異，應當注重不要在這個事宜的處置懲罰遞次中到場大盤算量的代碼，由於這些代碼有能夠被頻仍實行，從而致使瀏覽器迴響反映顯著變慢。瀏覽器窗口最小化或最大化時也會觸發 resize 事宜
1332、中心事宜會在頁面元素取得或落空中心時觸發。應用這些事宜並與document.hasFocus()要領及document.activeElement 屬性合營，可以曉得用戶在頁面上的行跡
1333、 focus 和 blur ，它們都是 JavaScript 初期就取得統統瀏覽器支撐的事宜。這些事宜的最大題目是它們不冒泡。因此，IE 的 focusin 和 focusout 與 Opera 的 DOMFocusIn和 DOMFocusOut 才會發作堆疊。IE 的體式格局末了被 DOM3 級事宜採納為範例體式格局
1334、鼠標事宜中另有一類滾輪事宜。而說是一類事宜，實在就是一個 mousewheel 事宜。這個事宜跟蹤鼠標滾輪，類似於 Mac 的觸控板
1335、鼠標事宜都是在瀏覽器視口中的特定位置上發作的。這個位置信息保存在事宜對象的 clientX 和clientY 屬性中。統統瀏覽器都支撐這兩個屬性，它們的值示意事宜發作時鼠標指針在視口中的水平和垂直坐標。注重，這些值中不包含頁面轉動的距離，因此這個位置並不示意鼠標在頁面上的位置。
1336、頁面坐標經由歷程事宜對象的pageX和pageY屬性，能通知你事宜是在頁面中的什麼位置發作的。換句話說，這兩個屬性示意鼠標光標在頁面中的位置，因此坐標是從頁面本身而非視口的左側和頂邊盤算的
1337、IE8 及更早版本不支撐事宜對象上的頁面坐標，不過運用客戶區坐標和轉動信息可以盤算出來。這時候需要用到 document.body （混淆形式）或 document.documentElement （範例形式）中的scrollLeft 和 scrollTop 屬性
1338、經由歷程 screenX 和 screenY 屬性便可以肯定鼠標事宜發作時鼠標指針相干於悉數屏幕的坐標信息
1339、雖然鼠標事宜重如果運用鼠標來觸發的，但在按下鼠標時鍵盤上的某些鍵的狀況也可以影響到所要採納的操縱。這些修正鍵就是 Shift、Ctrl、Alt 和 Meta（在 Windows鍵盤中是 Windows鍵，在蘋果機中是 Cmd 鍵），它們經常被用來修正鼠標事宜的行動。DOM 為此劃定了 4 個屬性，示意這些修正鍵的狀況： shiftKey 、 ctrlKey 、 altKey 和 metaKey 。這些屬性中包含的都是布爾值，假如相應的鍵被按下了，則值為 true ，不然值為 false 。當某個鼠標事宜發作時，經由歷程檢測這幾個屬性便可以肯定用戶是不是同時按下了个中的鍵
1340、DOM經由歷程 event 對象的 relatedTarget 屬性供應了相干元素的信息。這個屬性只關於 mouseover和 mouseout 事宜才包含值；關於其他事宜，這個屬性的值是 null
1341、只要在主鼠標按鈕被單擊（或鍵盤迴車鍵被按下）時才會觸發 click事宜，因此檢測按鈕的信息並非必要的。但關於 mousedown 和 mouseup 事宜來講，則在其 event 對象存在一個 button 屬性，示意按下或開釋的按鈕。DOM 的 button 屬性能夠有以下 3 個值： 0 示意主鼠標按鈕， 1 示意中心的鼠標按鈕（鼠標滾輪按鈕）， 2 示意次鼠標按鈕
1342、“DOM2 級事宜”範例在 event 對象中還供應了 detail 屬性，用於給出有關事宜的更多信息。關於鼠標事宜來講， detail 中包含了一個數值，示意在給定位置上發作了若干次單擊。在統一個元素上接踵地發作一次 mousedown 和一次 mouseup 事宜算作一次單擊。 detail 屬性從 1 最先計數，每次單擊發作后都邑遞增
1343、IE 6.0 起首完成了 mousewheel 事宜。今後，Opera、Chrome 和 Safari 也都完成了這個事宜。當用戶經由歷程鼠標滾輪與頁面交互、在垂直方向上轉動頁面時（不論向上照樣向下），就會觸發 mousewheel事宜。這個事宜可以在任何元素上面觸發，終究會冒泡到 document （IE8）或 window （IE9、Opera、Chrome 及 Safari）對象。與 mousewheel 事宜對應的 event 對象除包含鼠標事宜的統統範例信息外，還包含一個特別的 wheelDelta 屬性。當用戶向前轉動鼠標滾輪時， wheelDelta 是 120 的倍數；當用戶向後轉動鼠標滾輪時， wheelDelta 是120 的倍數。
1344、多半狀況下，只需曉得鼠標滾輪轉動的方向就夠了，而這經由歷程檢測 wheelDelta 的正負號便可以肯定。有一點要注重：在 Opera 9.5 之前的版本中， wheelDelta 值的正負號是倒置的。假如你盤算支撐初期的 Opera 版本，就需要運用瀏覽器檢測手藝來肯定現實的值
1345、鍵盤事宜keydown、keypress、keyup與鼠標事宜一樣，都支撐雷同的修正鍵。而且，鍵盤事宜的事宜對象中也有 shiftKey 、 ctrlKey 、 altKey 和 metaKey 屬性。IE 不支撐 metaKey
1346、鍵碼在發作 keydown 和 keyup 事宜時， event 對象的 keyCode 屬性中會包含一個代碼，與鍵盤上一個特定的鍵對應。對数字字母字符鍵， keyCode 屬性的值與 ASCII 碼中對應小寫字母或数字的編碼雷同
1347、發作 keypress 事宜意味着按下的鍵會影響到屏幕中文本的顯現。在統統瀏覽器中，按下可以插進去或刪除字符的鍵都邑觸發 keypress 事宜；按下其他鍵可否觸發此事宜因瀏覽器而異
1348、IE8及之前版本和Opera則是在 keyCode 中保存字符的ASCII編碼。要想以跨瀏覽器的體式格局取得字符編碼，必須起首檢測 charCode 屬性是不是可用，假如不可用則運用 keyCode。在取得了字符編碼今後，便可以運用 String.fromCharCode() 將其轉換成現實的字符
1349、只管統統瀏覽器都完成了某種情勢的鍵盤事宜，DOM3 級事宜照樣做出了一些轉變。比方，DOM3級事宜中的鍵盤事宜，不再包含 charCode 屬性，而是包含兩個新屬性： key 和 char。个中， key 屬性是為了庖代 keyCode 而新增的，它的值是一個字符串。在按下某個字符鍵時， key的值就是相應的文本字符（如“k”或“M”）；在按下非字符鍵時， key 的值是相應鍵的名（如“Shift”或“Down”）。而 char 屬性在按下字符鍵時的行動與 key 雷同，但在按下非字符鍵時價為 null。由於存在跨瀏覽器題目，因此本書不引薦運用 key 、 keyIdentifier 或 char
1350、 event 對象上另有一個屬性，叫 inputMethod ，示意把文本輸入到文本框中的體式格局。 1，示意是運用鍵盤輸入的；2，示意文本是粘貼進來的； 3，示意文本是拖放進來的； 7，示意文本是經由歷程語音輸入的
1351、支撐 textInput 屬性的瀏覽器有 IE9+、Safari 和 Chrome。只要 IE 支撐 inputMethod 屬性
1352、在統統瀏覽器中都可以作廢這個事宜：在兼容 DOM 的瀏覽器中，運用 event.preventDefalut() ；在 IE 中，將 event.returnValue 的值設置為 false 。由於 contextmenu 事宜屬於鼠標事宜，所以其事宜對象中包含與光標位置有關的統統屬性。平常運用 contextmenu 事宜來顯現自定義的高低文菜單，而運用 onclick 事宜處置懲罰遞次來隱蔽該菜單。支撐 contextmenu 事宜的瀏覽器有 IE、Firefox、Safari、Chrome 和 Opera 11+
1353、之所以有發作在 window 對象上的 beforeunload 事宜，是為了讓開闢人員有能夠在頁面卸載前阻撓這一操縱。這個事宜會在瀏覽器卸載頁面之前觸發，可以經由歷程它來作廢卸載並繼承運用原有頁面。然則，不能完整作廢這個事宜，由於那就相當於讓用戶沒法脫離當前頁面了。為此，這個事宜的企圖是將掌握權交給用戶。顯現的音訊會示知用戶頁面行將被卸載（正由於云云才會顯現這個音訊），訊問用戶是不是真的要封閉頁面，照樣願望繼承留下來。IE 和 Firefox、Safari 和 Chrome 都支撐 beforeunload 事宜，也都邑彈出這個對話框訊問用戶是不是真想脫離。Opera 11 及之前的版本不支撐 beforeunload 事宜
1354、touchstart ：當手指觸摸屏幕時觸發；縱然已有一個手指放在了屏幕上也會觸發。touchmove ：當手指在屏幕上滑動時一連地觸發。在這個事宜發作時期，挪用 preventDefault()可以阻撓轉動。touchend ：當手指從屏幕上移開時觸發。touchcancel ：當體系住手跟蹤觸摸時觸發。關於此事宜的確實觸發時候，文檔中沒有明白申明。上面這幾個事宜都邑冒泡，也都可以作廢
1355、gesturestart ：當一個手指已按在屏幕上而另一個手指又觸摸屏幕時觸發。gesturechange ：當觸摸屏幕的任何一個手指的位置發作變化時觸發。gestureend ：當任何一個手指從屏幕上面移開時觸發。
1356、事宜託付應用了事宜冒泡，只指定一個事宜處置懲罰遞次，便可以治理某一範例的統統事宜。運用事宜託付，只需在DOM 樹中只管最高的條理上增加一個事宜處置懲罰遞次。最適宜採納事宜託付手藝的事宜包含 click 、 mousedown 、 mouseup 、 keydown 、 keyup 和 keypress 。雖然 mouseover 和 mouseout 事宜也冒泡，但要恰當處置懲罰它們並不輕易，而且經常需要盤算元素的位置
1357、第一種狀況就是從文檔中移除帶有事宜處置懲罰遞次的元素時。這多是經由歷程地道的 DOM 操縱，比方運用 removeChild() 和 replaceChild() 要領，但更多地是發作在運用 innerHTML 替代頁面中某一部份的時候。假如帶有事宜處置懲罰遞次的元素被 innerHTML 刪除了，那末本來增加到元素中的事宜處置懲罰遞次極有能夠沒法被看成渣滓接納；致使“空事宜處置懲罰遞次”的另一種狀況，就是卸載頁面的時候

第十四章表單劇本

1401、在以挪用 submit() 要領的情勢提交表單時，不會觸發 submit 事宜，因此要記得在挪用此要領之前先考證表單數據
1402、提交表單時能夠湧現的最大題目，就是重複提交表單。在第一次提交表單后，假如長時候沒有迴響反映，用戶能夠會變得不耐煩。這時候，他們或許會重複單擊提交按鈕。結果每每很貧苦（由於效勞器要處置懲罰重複的請求），或許會形成毛病（假如用戶是下定單，那末能夠會多訂好幾份）。處理這一題目的方法有兩個：在第一次提交表單后就禁用提交按鈕，或許應用 onsubmit 事宜處置懲罰遞次作廢後續的表單提交操縱
1403、每一個表單都有elements 屬性，該屬性是表單中統統表單元素（字段）的鳩合。這個 elements 鳩合是一個有序列表，个中包含着表單中的統統字段，比方 <input> 、 <textarea> 、 <button> 和 <fieldset> 。每一個表單字段在 elements 鳩合中的遞次，與它們涌如今標記中的遞次雷同，可以根據位置和 name 特徵來接見它們。假如有多個表單控件都在運用一個 name （如單選按鈕），那末就會返回以該 name 定名的一個NodeList
1404、許多用戶能夠會重複單擊表單的提交按鈕。在觸及信用卡消費時，這就是個題目：由於會致使用度翻番。為此，最常見的處理計劃，就是在第一次單擊后就禁用提交按鈕。只需偵聽 submit 事宜，並在該事宜發作時禁用提交按鈕即可
1405、HTML5 為表單字段新增了一個 autofocus 屬性。在支撐這個屬性的瀏覽器中，只需設置這個屬性，不必 JavaScript 就可以自動把中心挪動到相應字段
1406、在默許狀況下，只要表單字段可以取得中心。關於其他元素而言，假如先將其tabIndex 屬性設置為1，然後再挪用 focus() 要領，也可以讓這些元素取得中心。只要 Opera 不支撐這類手藝
1407、關於 blur 和 change 事宜的關聯，並沒有嚴厲的劃定。在某些瀏覽器中， blur事宜會先於 change 事宜發作；而在其他瀏覽器中，則恰好相反。為此，不能假定這兩個事宜總會以某種遞次順次觸發，這一點要迥殊注重
1408、要表現文本框，必須將 <input> 元素的 type 特徵設置為 “text” 。而經由歷程設置 size 特徵，可以指定文本框中可以顯現的字符數。經由歷程 value 特徵，可以設置文本框的初始值，而 maxlength 特徵則用於指定文本框可以吸收的最大字符數
1409、<textarea> 元素則一直會呈現為一個多行文本框。要指定文本框的大小，可以運用 rows和 cols 特徵。个中， rows 特徵指定的是文本框的字符行數，而 cols 特徵指定的是文本框的字符列數（類似於 <inpu> 元素的 size 特徵）。與 <input> 元素差異， <textarea> 的初始值必須要放在<textarea> 和 </textarea> 之間
1410、 select() 要領，這個要領用於挑選文本框中的統統文本。在挪用 select()要領時，大多半瀏覽器（Opera 除外）都邑將中心設置到文本框中。這個要領不吸收參數，可以在任什麼時候刻被挪用

420、 select 事宜。在挑選了文本框中的文本時，就會觸發 select事宜。不過，究竟什麼時候觸發 select 事宜，還會因瀏覽器而異。在 IE9+、Opera、Firefox、Chrome和 Safari 中，只要用戶挑選了文本（而且要開釋鼠標），才會觸發 select 事宜。而在 IE8 及更早版本中，只需用戶挑選了一個字母（沒必要開釋鼠標），就會觸發 select 事宜。別的，在挪用 select() 要領時也會觸發 select 事宜

1411、取得挑選的文本。HTML5 經由歷程一些擴大計劃處理了這個題目，以便更順遂地取得挑選的文本。該範例採納的方法是增加兩個屬性： selectionStart 和 selectionEnd 。這兩個屬性中保存的是基於 0 的數值，示意所挑選文本的局限（即文本選區開首和末端的偏移量）
1412、HTML5也為挑選文本框中的部份文本供應了處理計劃，即最早由 Firefox 引入的setSelectionRange() 要領。如今除 select() 要領以外，統統文本框都有一個 setSelectionRange()要領。這個要領吸收兩個參數：要挑選的第一個字符的索引和要挑選的末了一個字符今後的字符的索引（類似於 substring() 要領的兩個參數）
1413、 clipboardData 對象有三個要領： getData() 、 setData() 和 clearData() 。个中， getData()用於從剪貼板中取得數據，它吸收一個參數，即要取得的數據的花樣； setData() 要領的第一個參數也是數據範例，第二個參數是要放在剪貼板中的文本
1414、任何標註有 required 的字段，在提交表單時都不能空着。這個屬性適用於 <input> 、 <textarea>和 <select> 字段（Opera 11 及之前版本還不支撐 <select> 的 required 屬性）。在 JavaScript 中，經由歷程對應的 required 屬性，可以搜檢某個表單字段是不是為必填字段
1415、HTML5 為文本字段新增了 pattern 屬性。這個屬性的值是一個正則表達式，用於婚配文本框中的值
1416、運用 checkValidity() 要領可以檢測表單中的某個字段是不是有效。統統表單字段都有個要領，假如字段的值有效，這個要領返回 true ，不然返回 false 。字段的值是不是有效的推斷根據是本節前面引見過的那些束縛。換句話說，必填字段中假如沒有值就是無效的，而字段中的值與 pattern 屬性不婚配也是無效的
1417、要檢測悉數表單是不是有效，可以在表單本身挪用 checkValidity() 要領。假如統統表單字段都有效，這個要領返回 true ；縱然有一個字段無效，這個要領也會返回 false
1418、關於只許可挑選一項的挑選框，接見選中項的最簡樸體式格局，就是運用挑選框的 selectedIndex 屬性
1419、與 selectedIndex 差異，在許可多選的挑選框中設置選項的 selected 屬性，不會作廢對其他選中項的挑選，因此可以動態選中恣意多個項。然則，假如是在單選挑選框中，修正某個選項的 selected 屬性則會作廢對其他選項的挑選。需要注重的是，將 selected 屬性設置為 false 對單選挑選框沒有影響
1420、 contenteditable 屬性運用給頁面中的任何元素，然後用戶馬上便可以編輯該元素。document.body.contentEditable=’true’

第十五章運用canvas畫圖

第十六章 HTML5劇本編程

第十七章毛病處置懲罰與調試

1701、在 IE7 及更早版本中，假如毛病發作在位於外部文件的劇本中，行號平常會與毛病地點的行號差 1。假如是嵌入在頁面中的劇本發作毛病，則行號就是毛病地點的行號
1702、ECMA-262 第 3 版引入了 try-catch 語句，作為 JavaScript 中處置懲罰非常的一種範例體式格局。也就是說，我們應當把統統能夠會拋出毛病的代碼都放在 try 語句塊中，而把那些用於毛病處置懲罰的代碼放在 catch 塊中。假如 try 塊中的任何代碼發作了毛病，就會馬上退出代碼實行歷程，然後接着實行 catch 塊。此時， catch 塊會吸收到一個包含毛病信息的對象。與在其他語言中差異的是，縱然你不想運用這個毛病對象，也要給它起個名字。這個對象中包含的現實信息會因瀏覽器而異，但配合的是有一個保存着毛病音訊的 message 屬性。ECMA-262 還劃定了一個保存毛病範例的 name 屬性；當前統統瀏覽器都支撐這個屬性（Opera 9 之前的版本不支撐這個屬性）。因此，在發作毛病時，便可以像下面如許量力而行地顯現瀏覽器給出的音訊
1703、只需代碼中包含 finally 子句，那末不論 try 照樣 catch 語句塊中的 return 語句都將被疏忽。因此，在運用 finally 子句之前，肯定要非常清晰你想讓代碼怎樣
1704、TypeError 範例在 JavaScript 中會常經常使用到，在變量中保存着不測的範例時，或許在接見不存在的要領時，都邑致使這類毛病。毛病的緣由雖然多種多樣，但歸根結柢照樣由於在實行特定於範例的操縱時，變量的範例並不符合請求而至
1705、運用 try-catch 最適宜處置懲罰那些我們沒法掌握的毛病。假定你在運用一個大型 JavaScript 庫中的函數，該函數能夠會有意無意地拋出一些毛病。由於我們不能修正這個庫的源代碼，所以大可將對該函數的挪用放在 try-catch 語句當中，萬一有什麼毛病發作，也好恰當地處置懲罰它們
1706、在碰到 throw 操縱符時，代碼會馬上住手實行。僅當有 try-catch 語句捕捉到被拋出的值時，代碼才會繼承實行

437、應用原型鏈還可以經由歷程繼承 Error 來豎立自定義毛病範例（原型鏈在第 6 章中引見）。此時，需要為新豎立的毛病範例指定 name 和 message 屬性

1707、說到拋出毛病與捕捉毛病，我們以為只應當捕捉那些你確實地曉得該怎樣處置懲罰的毛病。捕捉毛病的目的在於防備瀏覽器以默許體式格局處置懲罰它們；而拋出毛病的目的在於供應毛病發作詳細緣由的音訊
1708、圖象也支撐 error 事宜。只需圖象的 src 特徵中的 URL 不能返回可以被辨認的圖象花樣，就會觸發 error 事宜。此時的 error 事宜遵照 DOM花樣，會返回一個以圖象為目的的 event 對象
1709、經由歷程在 for 輪迴中增加 try-catch 語句，任何模塊初始化時失足，都不會影響其他模塊的初始化。在以上重寫的代碼中，假如有毛病發作，相應的毛病將會取得自力的處置懲罰，並不會影響到用戶的體驗
1710、console對象具有以下要領：error(message) ：將毛病音訊紀錄到掌握台；info(message) ：將信息性音訊紀錄到掌握台；log(message) ：將平常音訊紀錄到掌握台；warn(message) ：將正告音訊紀錄到掌握台
1711、另有一種計劃是運用 LiveConnect，也就是在 JavaScript 中運轉 Java 代碼。Firefox、Safari 和 Opera都支撐 LiveConnect，因此可以操縱 Java 掌握台：java.lang.System.out.println(“Your message”)
1712、紀錄音訊要比運用 alert() 函數更可取，由於正告框會阻斷遞次的實行，而在測定異步處置懲罰對時候的影響時，運用正告框會影響結果
1713、拋出毛病例子：throw new Error(“divide(): Both arguments must be numbers.”)
1714、在能夠發作毛病的處所運用 try-catch 語句，如許你另有時機以恰當的體式格局對毛病給出相應，而沒必要相沿瀏覽器處置懲罰毛病的機制
1715、運用 window.onerror 事宜處置懲罰遞次，這類體式格局可以吸收 try-catch 不能處置懲罰的統統毛病（僅限於 IE、Firefox 和 Chrome）

第十八章 JavaScript 與 XML

第十九章 E4X

第二十章 JSON

2001、JavaScript 字符串與 JSON 字符串的最大區分在於，JSON 字符串必須運用雙引號（單引號會致使語法毛病）
2002、JSON 中的對象請求給屬性加引號
2003、JSON 中沒有變量的觀點
2004、JSON沒有末端的分號
2005、 eval() 函數可以剖析、詮釋並返回 JavaScript 對象和數組
2006、JSON 對象有兩個要領： stringify() 和 parse() 。在最簡樸的狀況下，這兩個要領離別用於把JavaScript 對象序列化為 JSON 字符串和把 JSON 字符串剖析為原生 JavaScript 值
2007、將 JSON 字符串直接通報給 JSON.parse() 便可以取得相應的 JavaScript 值
2008、 JSON.stringify() 除了要序列化的 JavaScript 對象外，還可以吸收別的兩個參數，這兩個參數用於指定以差異的體式格局序列化 JavaScript 對象。第一個參數是個過濾器，可以是一個數組，也可以是一個函數；第二個參數是一個選項，示意是不是在 JSON 字符串中保存縮進
2009、有時候， JSON.stringify() 照樣不能滿足對某些對象舉行自定義序列化的需求。在這些狀況下，可以給對象定義 toJSON() 要領，返回其本身的 JSON 數據花樣

第二十一章 Ajax 與 Comet

2101、在運用 XHR 對象時，要挪用的第一個要領是 open() ，它吸收 3 個參數：要發送的請求的範例（ “get” 、 “post” 等）、請求的 URL 和示意是不是異步發送請求的布爾值
2102、要發送特定的請求，必須挪用 send() 要領。這裏的 send() 要領吸收一個參數，即要作為請求主體發送的數據。假如不需要經由歷程請求主體發送數據，則必須傳入 null ，由於這個參數對有些瀏覽器來講是必須的。挪用 send() 今後，請求就會被分派到效勞器
2103、挪用 XHR 對象的 getResponseHeader() 要領並傳入頭部字段稱號，可以取得相應的相應頭部信息。而挪用 getAllResponseHeaders() 要領則可以取得一個包含統統頭部信息的長字符串
2104、運用 GET 請求經常會發作的一個毛病，就是查詢字符串的花樣有題目。查詢字符串中每一個參數的稱號和值都必須運用 encodeURIComponent() 舉行編碼，然後才放到 URL 的末端；而且統統名-值對兒都必須由和號（&）分開
2105、 POST 請求應當把數據作為請求的主體提交，而 GET 請求傳統上不是如許。 POST 請求的主體可以包含非常多的數據，而且花樣不限
2106、假如不設置 Content-Type 頭部信息，那末發送給效勞器的數據就不會涌如今 $_POST 超等全局變量中。這時候，要接見一樣的數據，就必須藉助 $HTTP_RAW_POST_DATA
2107、與 GET 請求比擬， POST 請求斲喪的資本會更多一些。從機能角度來看，以發送雷同的數據計， GET 請求的速度最多可到達 POST 請求的兩倍
2108、XMLHttpRequest 2 級為此定義了FormData 範例。 FormData 為序列化表單以及豎立與表單花樣雷同的數據（用於經由歷程 XHR 傳輸）供應了輕易
2109、運用 FormData 的輕易的地方體如今沒必要明白地在 XHR 對象上設置請求頭部。XHR 對象可以辨認傳入的數據範例是 FormData 的實例，並設置恰當的頭部信息
2110、支撐 FormData 的瀏覽器有 Firefox 4+、Safari 5+、Chrome 和 Android 3+版 WebKit
2111、IE8 為 XHR 對象增加了一個 timeout 屬性，示意請求在守候相應若干毫秒今後就停止。在給timeout 設置一個數值后，假如在劃定的時候內瀏覽器還沒有吸收到相應，那末就會觸發 timeout 事宜，進而會挪用 ontimeout 事宜處置懲罰遞次。這項功用厥後也被收入了 XMLHttpRequest 2 級範例中。IE 8+是唯一支撐超時設定的瀏覽器
2112、Firefox 最早引入了 overrideMimeType() 要領，用於重寫 XHR 相應的 MIME 範例。這個要領厥後也被納入了 XMLHttpRequest 2 級範例。由於返回相應的 MIME 範例決議了 XHR 對象怎樣處置懲罰它，所以供應一種要領可以重寫效勞器返回的 MIME 範例是很有效的
2113、微軟在 IE8 中引入了 XDR（ XDomainRequest ）範例。這個對象與 XHR 類似，但能完成平安可靠的跨域通訊。XDR 對象的平安機制部份完成了 W3C 的 CORS 範例
2114、縱然瀏覽器對 CORS 的支撐水平並不都一樣，但統統瀏覽器都支撐簡樸的（非 Preflight 和不帶憑證的）請求，因此有必要完成一個跨瀏覽器的計劃。檢測 XHR 是不是支撐 CORS 的最簡樸體式格局，就是搜檢是不是存在 withCredentials 屬性。再連繫檢測 XDomainRequest 對象是不是存在，便可以統籌統統瀏覽器了
2115、第一種跨域請求手藝是運用 <img> 標籤，但該要領只能用於瀏覽器與效勞器間的單向通訊
2116、JSONP 是 JSON with padding（添補式 JSON 或參數式 JSON）的簡寫，是運用 JSON 的一種新要領，在厥後的 Web 效勞中非常盛行。JSONP 看起來與 JSON 差不多，只不過是被包含在函數挪用中的 JSON
2117、JSONP 由兩部份構成：回調函數和數據。回調函數是當相應到來時應當在頁面中挪用的函數。回調函數的名字平常是在請求中指定的。而數據就是傳入回調函數中的JSON數據。下面是一個典範的JSONP請求
2118、JSONP 是經由歷程動態 <script> 元素（要相識詳細信息，請參考第 13 章）來運用的，運用時可以為src 屬性指定一個跨域 URL。這裏的 <script> 元素與 <img> 元素類似，都有才不受限定地從其他域加載資本。由於 JSONP 是有效的 JavaScript 代碼，所以在請求完成后，即在 JSONP 相應加載到頁面中今後，就會馬上實行
2119、Ajax 是一種從頁面向效勞器請求數據的手藝，而 Comet 則是一種效勞器向頁面推送數據的手藝。Comet 可以讓信息近乎及時地被推送到頁面上，非常適宜處置懲罰體育競賽的分數和股票報價
2120、SSE（Server-Sent Events，效勞器發送事宜）是繚繞只讀 Comet 交互推出的 API 或許形式。SSE API用於豎立到效勞器的單向銜接，效勞器經由歷程這個銜接可以發送恣意數目的數據。效勞器相應的 MIME範例必須是 text/event-stream ，而且是瀏覽器中的 JavaScript API 能剖析花樣輸出。SSE 支撐短輪詢、長輪詢和 HTTP 流，而且能在斷開銜接時自動肯定什麼時候從新銜接
2121、Web Sockets的目的是在一個零丁的耐久銜接上供應全雙工、雙向通訊。在 JavaScript 中豎立了 Web Socket 今後，會有一個 HTTP 請求發送到瀏覽器以提議銜接。在取得效勞器相應后，豎立的銜接會運用 HTTP 晉級從 HTTP 協定交換為 WebSocket 協定。也就是說，運用範例的 HTTP 效勞器沒法完成 Web Sockets，只要支撐這類協定的特地效勞器才一般事情
2122、運用自定義協定而非 HTTP 協定的優點是，可以在客戶端和效勞器之間發送非常少許的數據，而沒必要憂鬱 HTTP 那樣字節級的開支。由於通報的數據包很小，因此 Web Sockets非常適宜挪動運用。畢竟對挪動運用而言，帶寬和收集耽誤都是癥結題目。運用自定義協定的瑕玷在於，制訂協定的時候比制訂JavaScript API 的時候還要長。Web Sockets曾幾度停留，就由於不停有人發明這個新協定存在一致性和平安性的題目。Firefox 4 和 Opera 11 都曾默許啟用 Web Sockets，但在宣布前夜又禁用了，由於又發明了平安隱患。現在支撐 Web Sockets 的瀏覽器有 Firefox 6+、Safari 5+、Chrome 和 iOS 4+版 Safari
2123、由於 Web Sockets只能經由歷程銜接發送純文本數據，所以關於龐雜的數據組織，在經由歷程銜接發送之前，必須舉行序列化
2124、面臨某個詳細的用例，在斟酌是運用 SSE 照樣運用 Web Sockets 時，可以斟酌以下幾個要素。起首，你是不是有自由度豎立和保護 Web Sockets效勞器？由於 Web Socket 協定差異於 HTTP，所以現有效勞器不能用於 Web Socket 通訊。SSE 卻是經由歷程通例 HTTP 通訊，因此現有效勞器便可以滿足需求。第二個要斟酌的題目是究竟需不需要雙向通訊。假如用例只需讀取效勞器數據（如競賽結果），那末 SSE 比較輕易完成。假如用例必須雙向通訊（如聊天室），那末 Web Sockets 明顯更好。別忘了，在不能挑選 Web Sockets 的狀況下，組合 XHR 和 SSE 也是能完成雙向通訊的
2125、同源戰略是對 XHR 的一個重要束縛，它為通訊設置了“雷同的域、雷同的端口、雷同的協定”這一限定。試圖接見上述限定以外的資本，都邑激發平安毛病，除非採納被承認的跨域處理計劃。這個處理計劃叫做 CORS（Cross-Origin Resource Sharing，跨源資本同享），IE8 經由歷程 XDomainRequest 對象支撐CORS，其他瀏覽器經由歷程 XHR 對象原生支撐 CORS。圖象 Ping 和 JSONP 是別的兩種跨域通訊的手藝，但不如 CORS 穩妥
2126、Comet 是對 Ajax 的進一步擴大，讓效勞器險些可以及時地向客戶端推送數據。完成 Comet 的手腕重要有兩個：長輪詢和 HTTP 流。統統瀏覽器都支撐長輪詢，而只要部份瀏覽器原生支撐 HTTP 流。SSE（Server-Sent Events，效勞器發送事宜）是一種完成 Comet 交互的瀏覽器 API，既支撐長輪詢，也支撐HTTP 流
2127、Web Sockets是一種與效勞器舉行全雙工、雙向通訊的信道。與其他計劃差異，Web Sockets 不運用HTTP 協定，而運用一種自定義的協定。這類協定特地為疾速傳輸小數據設想。雖然請求運用差異的Web 效勞器，但卻具有速度上的上風

第二十二章高等技能

2201、函數綁定可以在特定的 this 環境中以指定參數挪用另一個函數。該技能經常和回調函數與事宜處置懲罰遞次一同運用，以便在將函數作為變量通報的同時保存代碼實行環境
2202、一個簡樸的 bind() 函數吸收一個函數和一個環境，並返回一個在給定環境中挪用給定函數的函數，而且將統統參數一成不變通報過去
2203、ECMAScript 5 為統統函數定義了一個原生的 bind() 要領，進一步簡樸了操縱

485、原生的 bind() 要領與前面引見的自定義 bind() 要領類似，都是要傳入作為 this 值的對象。支撐原生 bind() 要領的瀏覽器有 IE9+、Firefox 4+和 Chrome

2204、與函數綁定嚴密相干的主題是函數柯里化（function currying），它用於豎立已設置好了一個或多個參數的函數。函數柯里化的基礎要領和函數綁定是一樣的：運用一個閉包返回一個函數。二者的區分在於，當函數被挪用時，返回的函數還需要設置一些傳入的參數
2205、JavaScript 同享的實質一直是開闢人員心頭的痛。由於任何對象都可以被在統一環境中運轉的代碼修正。開闢人員極能夠會不測地修正他人的代碼，以至更蹩腳地，用不兼容的功用重寫原生對象。ECMAScript 5致力於處理這個題目，可以讓開闢人員定義防改動對象（tamper-proof object）
2206、第一行代碼已完整定義 person 對象，但第二行代碼依然能給它增加屬性。運用Object.preventExtensions() 要領可以轉變這個行動，讓你不能再給對象增加屬性和要領
2207、雖然不能給對象增加新成員，但已有的成員則絲毫不受影響。你依然還可以修正和刪除已有的成員。別的，運用 Object.istExtensible() 要領還可以肯定對象是不是可以擴大
2208、密封對象不可擴大，而且已有成員的 [[Configurable]] 特徵將被設置為 false 。這就意味着不能刪除屬性和要領。要密封對象，可以運用 Object.seal() 要領
2209、凝結的對象既不可擴大，又是密封的，而且對象數據屬性的 [[Writable]] 特徵會被設置為 false 。假如定義 [[Set]] 函數，接見器屬性依然是可寫的。ECMAScript 5定義的 Object.freeze() 要領可以用來凝結對象
2210、除了主 JavaScript 實行歷程外，另有一個需要在歷程下一次餘暇時實行的代碼行列。跟着頁面在其生命周期中的推移，代碼會根據實行遞次增到場行列。比方，當某個按鈕被按下時，它的事宜處置懲罰遞次代碼就會被增加到行列中，並在下一個能夠的時候里實行。當吸收到某個 Ajax 相應時，回調函數的代碼會被增加到行列。在 JavaScript 中沒有任何代碼是馬上實行的，但一旦歷程餘暇則儘快實行
2211、定時器對行列的事情體式格局是，當特定時候過去后將代碼插進去。注重，給行列增加代碼並不意味着對它馬上實行，而只能示意它會儘快實行。設定一個 150ms 后實行的定時器不代表到了 150ms代碼就馬上實行，它示意代碼會在 150ms 后被到場到行列中。假如在這個時候點上，行列中沒有其他東西，那末這段代碼就會被實行，表面上看上去彷佛代碼就在準確指定的時候點上實行了。其他狀況下，代碼能夠顯著地守候更長時候才實行
2212、運用 setInterval() 豎立的定時器確保了定時器代碼劃定規矩地插進去行列中。這個體式格局的題目在於，定時器代碼能夠在代碼再次被增加到行列之前還沒有完成實行，結果致使定時器代碼一連運轉好幾次，而之間沒有任何停留。幸虧，JavaScript 引擎夠智慧，能防備這個題目。當運用 setInterval() 時，僅當沒有該定時器的任何其他代碼實例時，才將定時器代碼增加到行列中
2213、這類重複定時器的劃定規矩有兩個題目：(1) 某些距離會被跳過；(2) 多個定時器的代碼實行之間的距離能夠會比預期的小
2214、運轉在瀏覽器中的 JavaScript 都被分配了一個肯定數目的資本。差異於桌面運用每每可以隨便掌握他們要的內存大小和處置懲罰器時候，JavaScript 被嚴厲限定了，以防備歹意的 Web 遞次員把用戶的盤算機搞掛了。个中一個限定是長時候運轉劇本的限制，假如代碼運轉凌駕特定的時候或許特定語句數目就不讓它繼承實行。假如代碼到達了這個限定，會彈出一個瀏覽器毛病的對話框，通知用戶某個劇本會用太長的時候實行，訊問是許可其繼承實行照樣住手它
2215、瀏覽器中某些盤算和處置懲罰要比其他的高貴許多。比方，DOM 操縱比起非 DOM 交互需要更多的內存和 CPU 時候。一連嘗試舉行過量的 DOM相干操縱能夠會致使瀏覽器掛起，有時候以至會崩潰。尤其在 IE 中運用 onresize 事宜處置懲罰遞次的時候輕易發作，當調解瀏覽器大小的時候，該事宜會一連觸發。在 onresize 事宜處置懲罰遞次內部假如嘗試舉行 DOM 操縱，其高頻率的變動能夠會讓瀏覽器崩潰。為了繞開這個題目，你可以運用定時器對該函數舉行撙節
2216、只需代碼是周期性實行的，都應當運用撙節，然則你不能掌握請求實行的速度
2217、事宜是一種叫做視察者的設想形式，這是一種豎立鬆懈耦合代碼的手藝。對象可以宣布事宜，用來示意在該對象生命周期中某個風趣的時候到了。然後其他對象可以視察該對象，守候這些風趣的時候到來並經由歷程運轉代碼來相應
2218、視察者形式由兩類對象構成：主體和視察者。主體擔任宣布事宜，同時視察者經由歷程定閱這些事宜來視察該主體。該形式的一個癥結觀點是主體並不曉得視察者的任何事情，也就是說它可以單獨存在並一般運作縱然視察者不存在。從另一方面來講，視察者曉得主體並能註冊事宜的回調函數（事宜處置懲罰遞次）。觸及 DOM 上時，DOM 元素就是主體，你的事宜處置懲罰代碼就是視察者
2219、拖放是一種非常盛行的用戶界面形式。它的觀點很簡樸：點擊某個對象，並按住鼠標按鈕不放，將鼠標挪動到另一個地區，然後開釋鼠標按鈕將對象“放”在這裏。拖放功用也盛行到了 Web 上，成為了一些更傳統的設置界面的一種候選計劃
2220、JavaScript 中的函數非常壯大，由於它們是第一類對象。運用閉包和函數環境切換，還可以有許多運用函數的壯大要領。可以豎立作用域平安的組織函數，確保在缺乏 new 操縱符時挪用組織函數不會轉變毛病的環境對象

第二十三章離線運用與客戶端存儲

第二十四章最佳實踐

2401、變量和函數定名：變量名應為名詞如 car 或 person；函數名應當以動詞最先，如 getName() 。返回布爾範例值的函數平常以 is 開首，如isEnable()；變量和函數都應運用合乎邏輯的名字，不要憂鬱長度。長度題目可以經由歷程后處置懲罰和緊縮（本章背面會講到）來減緩
2402、由於在 JavaScript 中變量是鬆懈範例的，很輕易就遺忘變量所應包含的數據範例。適宜的定名體式格局可以肯定水平上減緩這個題目，但放到統統的狀況下看，還不夠。有三種示意變量數據範例的體式格局。第一種體式格局是初始化；第二種要領是運用匈牙利標記法來指定變量範例；末了一種指定變量範例的體式格局是運用範例詮釋
2403、只需運用的某個部份太過依賴於另一部份，代碼就是耦合過緊，難於保護。典範的題目如：對象直接援用另一個對象，而且當修正个中一個的同時需要修正別的一個。嚴密耦合的軟件難於保護而且需要經常重寫
2404、編程實踐：尊敬對象統統權；防備全局量；防備與 null 舉行比較；運用常量
2405、機能：注重作用域，防備全局查找，，防備 with 語句；挑選準確要領，防備沒必要要的屬性查找，優化輪迴，睜開輪迴，防備兩重詮釋，原生要領較快， Switch 語句較快，位運算符較快；最小化語句數，多個變量聲明，插進去迭代值，運用數組和對象字面量；優化DOM交互，最小化現場更新，運用 innerHTML，運用事宜託付，注重 HTMLCollection；布置，構建歷程，考證，緊縮

第二十五章新興的API

2501、requestAnimationFrame() ：是一個着眼於優化 JavaScript 動畫的 API，可以在動畫運轉時期發出信號。經由歷程這類機制，瀏覽器便可以自動優化屏幕重繪操縱。
2502、Page Visibility API：讓開闢人員曉得用戶什麼時候正在看着頁面，而什麼時候頁面是隱蔽的。
2503、Geolocation API：在取得許可的狀況下，可以肯定用戶地點的位置。在挪動 Web 運用中，這個API 非常重要而且經常使用。
2504、File API：可以讀取文件內容，用於顯現、處置懲罰和上傳。與 HTML5 的拖放功用連繫，很輕易就可以創造出拖放上傳功用。
2505、Web Timing：給出了頁面加載和襯着歷程的許多信息，對機能優化非常有價值。
2506、Web Workers：可以運轉異步 JavaScript 代碼，防備壅塞用戶界面。在實行龐雜盤算和數據處置懲罰的時候，這個 API 非常有效；要不然，這些使命輕則會佔用很長時候，重則會致使用戶沒法與頁面交互。

附錄 A

常量
塊級作用域及其他作用域
盈餘參數與散布參數
默許參數值
生成器
迭代器
數組意會
解構賦值
代辦對象
代辦函數
映照與鳩合
WeakMap
StructType
ArrayType
類，私有成員
getter 和 setter
繼承
模塊

附錄 B

挑選運用
變量
對象
函數
eval()
eval 與 arguments
抑止 this
其他變化

附錄 C

JavaScript 庫

附錄 D

JavaScript東西

    原文作者：科瑞茲曼
    原文地址: https://segmentfault.com/a/1190000014699531
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。