Question

作为AS3开发人员，我习惯了这个：

addEventListener(Event.RESIZE, onResize);

我正在尝试学习Typescript / JS / HTML5，并且我不断看到所有这些不同的做事方式。

我喜欢这种风格：

window.addEventListener("resize", this.onResize);

我讨厌这种风格：

window.onresize = function();

有人可以解释为什么存在这两种方法吗？它们可以互换吗？如果我在dom API参考上看到window.onfoo，我可以使用window.addEventListener（“onfoo”，this.onFoo）;

最后，dom中的任何地方都有静态事件列表吗？我可以说Event.onresize还是我需要输入字符串？

Answer 1

我认为你的意思是：

window.addEventListener("resize", this.onResize);

现代浏览器中没有onresize事件，但DOM中有onresize属性。

有人可以解释为什么存在这两种方法吗？

'内联处理程序;存在于historic/backwards compatibility reasons并反映可以添加到HTML标记的属性。以同样的方式，您拥有click事件，onclick DOM属性和onclick属性 - 该模式会针对许多其他事件重复。

这些内联事件处理程序是当JavaScript首次出现在场景中时在Netscape 2.0中实现的。从那以后他们就一直闲逛，因为这个模型很简单，易于理解，易于复制和粘贴，而且没有人通过打破现有的网络内容使网络浏览器变得流行，但如果你是一个专业的网络开发者，你就不应该这样做。永远不会使用它们。

内联事件注册有许多限制，最明显的是每个元素只能有一个属性/属性。 Netscape和Microsoft开发了更高级（但不兼容）的模型，然后W3C尝试在所有现代浏览器实现的DOM Level 2 spec中进行标准化。

然而IE继续使用微软的专有模型，直到版本9，这可能是你的第一个例子的混淆：

window.attachEvent('onresize',this.onResize);

主要浏览器之间事件处理的这种基本不兼容性是推动创建许多JavaScript框架（如jQuery）的主要因素之一（与XHR一起）。

他们可以互换吗？

如果你同时添加一个内联事件处理程序并附加一个addEventListener，那么，如果你没有故意取消该事件，both handlers will run（也就是说 - 它们不是同一个东西）。但是，为了防止未来的疯狂，我建议坚持使用更现代的方法。

最后，dom中的任何地方都有静态事件列表吗？

不，在任何一个标准中都没有通用列表，因为事件本身倾向于在规范中定义它们是相关的而不是与机制的定义一起。如果您担心浏览器支持特定事件，则可能需要定义isEventSupported()或use Modernizr等函数。