web前端：IE 浏览器的创新

作者:Nicholas C. Zakas更新于： 2020-12-06 14:44:40

　　IE，是美国微软公司（Microsoft）推出的一款网页浏览器。截至2010年9月止，统计的数据显示IE占有率高达59.65%。虽然它依然是使用最广泛的网页浏览器，但与2003年最高时相比[1]，市场占有率逐年下降。

　　IE曾是web创新的先驱，但最近几年因为对web标准的支持落后于其他浏览器以及低版本IE的各种bug而被人诟病。雅虎的NicholasC.Zakas带我们回顾了IE在web发展过程中扮演的辉煌角色，让我们能以一个更客观的眼光来看待IE。看完这篇文章，也许大家都会对IE浏览器有一定的改观，这也是我翻译这篇文章的目的。

　　译文

　　在InternetExplorer成为大家都恨之入骨的浏览器的很久以前，它曾是整个互联网的创新驱动力。有时候我们很难记得那些在IE6成为全世界Web开发者的灾难之前IE所作的贡献。不管你信不信，正因为有了IE4~6，才会有我们现在所知的web开发。IE的一些独特的功能过去就曾是事实标准，后来成为了官方标准最终进入了HTML5规范。人们也许很难相信，对于我们现在认为理所应当的功能中有很大一部分都应该要想到IE，但快速地回顾一下历史可以让我们知道的确如此。

　　DOM

　　如果IE是一个人人都痛恨的浏览器，那么「文档对象模型」（DOM）就是人人都痛恨的API了。你可以说DOM过于繁琐、不适合Javascript甚至是有些荒谬，而且这些也都没错。然而，DOM还是给了开发者通过JavaScript来访问网页的每个部分的途径。曾经你一度只能通过JavaScript访问页面中某些特定的元素。IE3和Netscape3只允许程序访问表单元素、图片以及链接。Netscape4改进了这一点，把程序可访问的范围通过document.layers扩展到了它特有的layer元素。IE4作了进一步改进，把这个范围通过document.all扩展到了页面的所有元素。

　　从很多方面来说，document.all算是document.getElementById()的最初版本。你还是要使用元素的ID来通过document.all访问它，例如document.all.myDiv或是document.all["myDiv"]。最主要的区别就是IE使用了一个集合而非方法，而这和其他当时的访问方法比如document.images及document.forms是相吻合的。

　　IE4也第一个引入了用document.all.tags()来通过标签名字获取一个元素列表的功能。无论从哪点来看，这都是document.getElementsByTagName()的最初版本，而且工作方式完全相同。如果你想获取所有的div元素，你可以使用document.all.tags("div")。甚至在IE9中，这个方法仍然作为document.getElementsByTagName()的一个别名存在。

　　IE4同时也为我们引入了可能是有史以来最流行的私有DOM扩展：innerHTML。看起来微软的那帮人是认识到了通过编程手段来建立一个DOM有多么痛苦，所以把这个便捷方法，连同outerHTML一起提供给我们。事实证明这两个方法都非常有用，已经在HTML5中被标准化了[1]。随它们一同而来的用来处理纯文本的API——innerText以及outerText——同样被证明足够有影响力，因为DOMLevel3已经引入了与innerText行为相似的textContent[2]。

　　按照同样的思路，IE4引入了insertAdjacentHTML()，这是又一种将HTML插入文档中的方法。虽然这花了更长的时间，但最终也被编入了HTML5[3]，而且目前已被各浏览器广泛支持。

　　事件

　　在开始时，JavaScript并没有事件机制。网景和微软都作出了尝试，并且分别得出了不同的模型。网景给我们带来了事件捕获，其思想是一个事件先发送到窗口，然后是文档，然后一个个直到最终到达预期的目标。网景浏览器6以前的版本都仅支持事件捕获。

　　微软采取了一个相反的方法，设计出了事件冒泡。他们认为一个事件应该先从实际的目标出发，然后在上层节点触发直到文档。IE9以前的浏览器仅支持事件冒泡。虽然随着官方的DOM事件规范发展，同时包含了事件捕获和事件冒泡，但大多数web开发者都只使用事件冒泡，而把事件捕获仅仅留在JavaScript类库中的一些解决方案和小技巧中使用。

　　除了创造了事件冒泡以外，微软还创造了一系列后来也最终被标准化的额外事件：

　　contextmenu–当使用鼠标副按键点击一个元素时触发。在IE5中首次出现，后来被编入了HTML5[4]。现在已被所有主流浏览器所支持。

　　beforeunload–在unload事件前触发，允许你阻断页面的退出。最初由IE4引入，现在也为HTML5的一部分[4]。

　　mousewheel–在鼠标滚轮（或类似设备）被使用时触发。首个支持此事件的浏览器是IE6。就像其他一样，目前也是HTML5的一部分[4]。唯一不支持此事件的主流桌面浏览器是Firefox（但其支持一个可用来替代的DOMMouseScroll事件）。

　　mouseenter–mouseover的非冒泡版本，被微软在IE5中引入，用来克服mouseover使用时带来的困扰。这个事件已被DOMLevel3事件规范正规化[5]。同样被Firefox及Opera支持，但Safari和Chrome都（暂时？）不支持。

　　mouseleave–与mouseenter对应的mouseout的非冒泡版本。在IE5中被引入，目前被DOMLevel3事件规范标准化[6]。浏览器支持和mouseenter一样。

　　focusin–focus事件的冒泡版本，用来帮助更好地管理页面上的聚焦行为。最初在IE6中被引入，现在已成为DOMLevel3事件规范的一部分[7]。目前没有被很好地支持，尽管Firefox关于其实现的开过一个bug。

　　focusout–blur事件的冒泡版本，用来帮助更好地管理页面上的聚焦行为。最初在IE6中被引入，现在已成为DOMLevel3事件规范的一部分[8]。和focusin一样，没有良好支持但Firefox接近了。