JavaScript >> Javascript 文檔 >  >> JavaScript

Internet Explorer 的創新

早在 Internet Explorer 成為每個人又愛又恨的瀏覽器之前,它就是 Internet 創新的驅動力。有時很難記住 Internet Explorer 在 Internet Explorer 6 成為各地 Web 開發人員的禍害之前所做的所有好事。信不信由你,Internet Explorer 4-6 對我們今天所知的 Web 開發負有重大責任。許多專有功能成為事實上的標準,然後是官方標準,其中一些最終成為 HTML5 規範。可能很難相信 Internet Explorer 實際上要感謝我們今天認為理所當然的許多功能,但快速瀏覽歷史表明這是真的。

DOM

如果 Internet Explorer 是每個人都愛恨的瀏覽器,那麼文檔對像模型 (DOM) 就是每個人都愛恨的 API。您可以稱 DOM 過於冗長、不適合 JavaScript 並且有些荒謬,但您在所有方面都是正確的。但是,DOM 使開發人員可以通過 JavaScript 訪問網頁的每個部分。曾經有一段時間,您只能通過 JavaScript 訪問頁面上的某些元素。 Internet Explorer 3 和 Netscape 3 只允許以編程方式訪問表單元素、圖像和鏈接。 Netscape 4 通過擴展對專有 <layer> 的編程訪問來改善這種情況 元素通過 document.layers . Internet Explorer 4 允許通過 document.all 以編程方式訪問頁面上的每個元素,從而進一步改善了這種情況

在許多方面,document.alldocument.getElementById() 的第一個版本 .您仍然使用元素的 ID 通過 document.all 訪問它 ,如document.all.myDivdocument.all["myDiv"] .主要區別在於 Internet Explorer 使用集合而不是函數,它匹配當時所有其他訪問方法,例如 document.imagesdocument.forms .

Internet Explorer 4 也是第一個引入通過 document.all.tags() 按標籤名稱獲取元素列表功能的瀏覽器 .出於所有意圖和目的,這是 document.getElementsByTagName() 的第一個版本 並以完全相同的方式工作。如果你想得到所有 <div> 元素,您將使用 document.all.tags("div") .即使在 Internet Explorer 9 中,這種方法仍然存在並且只是 document.getElementsByTagName() 的別名 .

Internet Explorer 4 還向我們介紹了可能是有史以來最流行的專有 DOM 擴展:innerHTML .微軟的人似乎意識到以編程方式構建 DOM 是多麼痛苦,並為我們提供了這個快捷方式,以及 outerHTML .兩者都被證明非常有用,它們被標準化為 HTML5 1 .處理純文本的配套 API,innerTextouterText ,也被證明有足夠的影響力,以至於 DOM Level 3 引入了 textContent 2 ,其作用類似於 innerText .

同樣,Internet Explorer 4 引入了 insertAdjacentHTML() ,另一種將 HTML 文本插入文檔的方法。這個花了一點時間,但也被編入了 HTML5 3 現已被瀏覽器廣泛支持。

活動

一開始,JavaScript 沒有事件系統。網景和微軟都嘗試過,並且各自提出了不同的模型。 Netscape 為我們帶來了事件捕獲,即事件首先傳遞到窗口,然後傳遞到文檔,依此類推,直到最終到達預期目標。版本 6 之前的 Netscape 瀏覽器僅支持事件捕獲。

微軟採取了相反的方法並提出了事件冒泡。他們認為事件應該從實際目標開始,然後向父母開火,等等直到文件。版本 9 之前的 Internet Explorer 僅支持事件冒泡。儘管官方的 DOM 事件規範發展為包括事件捕獲和事件冒泡,但大多數 Web 開發人員只使用事件冒泡,將事件捕獲保存為一些深埋在 JavaScript 庫中的解決方法和技巧。

除了創建事件冒泡,微軟還創建了一堆最終成為標準化的附加事件:

  • contextmenu – 當您在元素上使用鼠標輔助按鈕時觸發。最初出現在 Internet Explorer 5 中,後來被編入 HTML5 4 .現在所有主流桌面瀏覽器都支持。
  • beforeunload – 在 unload 之前觸發 事件並允許您阻止頁面的卸載。最初在 Internet Explorer 4 中引入,現在是 HTML5 4 的一部分 .所有主要桌面瀏覽器也都支持。
  • mousewheel – 使用鼠標滾輪(或類似設備)時觸發。第一個支持此事件的瀏覽器是 Internet Explorer 6。就像其他瀏覽器一樣,它現在是 HTML5 4 的一部分 .唯一不支持此事件的主要桌面瀏覽器是 Firefox(它確實支持替代 DOMMouseScroll 事件)。
  • mouseentermouseover 的非冒泡版本 ,由 Microsoft 在 Internet Explorer 5 中引入,以幫助解決使用 mouseover 的問題 .此事件在 DOM 3 級事件中正式化 5 .在 Firefox 和 Opera 中也受支持,但在 Safari 或 Chrome 中不支持(還沒有?)。
  • mouseleavemouseout 的非冒泡版本 匹配 mouseenter .在 Internet Explorer 5 中引入,現在也在 DOM 3 級事件中標準化 6 .與 mouseenter 相同的支持級別 .
  • focusinfocus 的冒泡版本 幫助更輕鬆地管理頁面焦點。最初在 Internet Explorer 6 中引入,現在是 DOM 3 級事件的一部分 7 .目前還沒有得到很好的支持,儘管 Firefox 有一個針對其實施的錯誤。
  • focusoutblur 的冒泡版本 幫助更輕鬆地管理頁面焦點。最初在 Internet Explorer 6 中引入,現在是 DOM 3 級事件的一部分 8 .與 focusin 一樣 , 尚未得到很好的支持,但 Firefox 已經很接近了。