Question

我正在围绕js开发者社区跳跃，我们可以就此达成共识：

我们是否应该声明或onclick，onkeyup ...等... 内部或外部我们的HTML文档？

1）我更愿意将它们分开。真正。 2）我也知道HTML5在游戏中增加了一些新的互动元素......

此致 MEM

Answer 1

考虑阅读Unobtrusive JavaScript和jQuery。

Answer 2

至少十年来，编写事件处理程序inline一直是个坏主意。

即使访问像'element.onkeyup'这样的属性也是一个非常糟糕的主意。

使用听众。更好的是一个框架。

编辑：这就是Tim Down的评论荒谬的原因：

如果任何编程决策的理由以“如果你知道你只需要......”开头，那么就不会这样做。认真。
“所有可编写脚本的浏览器”实际上意味着IE5.5 + FF2 + Safari 3+ Opera 9+。这涵盖了99％以上的网络用户，所有这些浏览器都支持事件监听器。事件侦听器与访问事件处理程序属性相比具有重大优势 - 最重要的是，任何事件都可以有多个侦听器。在现代Javascript编程中，这种情况一直都在发生。特别限制你的代码使用过时的事件处理系统只是因为你可能是一个糟糕的想法，对真正好的想法充满敌意，比如使用库和编写不引人注目的，一致的代码。
return false;是一种严格违反直觉和反语义的方式，意思是“停止在DOM树上向/向下传播/传播此事件”。你知道什么是直观的吗？库代码中的常用表达式，如event.stop()。

Answer 3

理想情况下，如果您可以定义事件代码并将这些事件附加到单独的JS文件中的匹配元素。尽可能分开JS和HTML。

Answer 4

目前流行的观点是，一切都必须是不引人注目的，这意味着诸如someElement.onclick = function(e) { ... };之类的事件处理程序属性被广泛赞同，并且诸如<input type="button" onclick="doSomething()">之类的事件处理程序属性被彻底驳回。事实上，两者都有有效用途。

将行为（例如脚本事件处理程序）与内容分开的愿望是很自然的，并且是主要的考虑因素，但不应该是唯一的考虑因素。如下面的摘要所示，创建事件处理程序的三种方法各有优缺点，在特定情况下，行为和内容的分离可能不是最重要的问题。

总之，对于给定的任务，请使用最符合您需求的方法。

事件处理程序属性

实施例

myElement.onclick = function(e) { alert("Clicked"); };

这些对于将事件处理程序分配给您在脚本中创建的元素特别有用，并且肯定只需要一个侦听器。

优点

将行为与内容分开
适用于所有可编写脚本的浏览器
除了Event对象来自的地方（IE中的window.event，其他浏览器中的函数参数）之外，所有浏览器的工作方式都相同。
使用return false

缺点

仅允许一个侦听器处理特定对象和事件
在HTML源代码中的元素上，在加载文档之前通常不会分配处理程序

事件处理程序属性

实施例

<input type="button" value="test" onclick="alert('Clicked');">

当元素在文档加载完成之前响应事件时，这是唯一有效的方法（参见 http://peter.michaux.ca/articles/the-window-onload-problem-still对此进行更长时间的讨论）。此外，它是添加事件处理程序的最简单方法。

优点

适用于所有可编写脚本的浏览器
在所有浏览器中使用相同的内容
在元素呈现后立即工作
添加事件处理程序的最简单方法
使用return false
在一个非常简单的页面上，它是最易读的方法
Standardized in the HTML 4 spec

缺点

将行为与内容混合
仅允许一个侦听器处理特定对象和事件

的addEventListener /的attachEvent

示例（attachEvent等效项未显示）

myElement.addEventListener("click", function(e) { alert("Clicked"); }, false);

这是唯一允许您将多个侦听器附加到特定对象上的特定事件的方法。 addEventListener标准化了addEventListener。

优点

将行为与内容分开
允许多个事件侦听器
attachEvent是一个现代标准，IE 9支持意味着所有当前主流浏览器都支持IE 9的发布

缺点

正确实现跨浏览器
IE的addEventListener并不完全等同于{{1}}
在HTML源代码中的元素上，在加载文档之前通常不会分配处理程序

javascript - 事件 - 放置它们的位置？

4 个答案:

事件处理程序属性

实施例

优点

缺点

事件处理程序属性

实施例

优点

缺点

的addEventListener /的attachEvent

示例（attachEvent等效项未显示）

优点

缺点