0

我希望在 js 开发者社区中我们可以就此达成共识：

我们应该在HTML 文档内部还是外部声明或声明 onclick、onkeyup... 等事件？

1）我更喜欢将它们分开。真的。2) 我也知道 HTML5 在游戏中添加了一些新的交互元素......

问候， 记忆

4

4 回答 4

3

考虑阅读Unobtrusive JavaScript和jQuery。

于 2010-08-23T08:30:18.530 回答
3

至少十年来，内联编写事件处理程序一直是一个非常糟糕的主意。

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

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

编辑：这就是为什么 Tim Down 的评论很荒谬：

  1. 如果任何编程决策的理由都是以“如果你知道你只会需要……”开头，那么不要这样做。严重地。

  2. “所有可编写脚本的浏览器”实际上是指 IE5.5+ FF2+ Safari 3+ Opera 9+。这涵盖了 99% 以上的网络用户，并且所有这些浏览器都支持事件侦听器。与访问事件处理程序属性相比，事件侦听器具有主要优势 - 最大的优势是任何事件都可以有多个侦听器。在现代 Javascript 编程中，这种情况一直都在发生。仅仅因为你可以使用过时的事件处理系统而对你的代码进行特殊处理是一个糟糕的想法，它对使用库和编写不引人注目的、一致的代码等真正好的想法充满敌意。

  3. return false;是一种完全违反直觉和反语义的方式，意思是“停止在 DOM 树上/下冒泡/传播此事件”。你知道什么是直觉吗？库代码中的常用表达式，如event.stop().

于 2010-08-23T08:30:19.787 回答
2

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

于 2010-08-23T08:29:01.073 回答
2

当前流行的观点是一切都必须不显眼，这意味着事件处理程序属性（例如someElement.onclick = function(e) { ... };被广泛反对的）和事件处理程序属性（例如<input type="button" onclick="doSomething()">被彻底驳回）。事实上，两者都有有效的用途。

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

总之，对于给定的任务，请使用适合您需要的最简单的方法。

事件处理程序属性

例子

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

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

好处

  • 将行为与内容分开
  • 适用于所有可编写脚本的浏览器
  • 在所有浏览器中都一样，除了 Event 对象来自哪里的问题（window.event在 IE 中，在其他浏览器中的函数参数）
  • 普遍支持的防止默认浏览器行为的方法return false

缺点

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

事件处理程序属性

例子

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

当元素在文档完成加载之前响应事件很重要时，这是唯一有效的方法（请参阅 http://peter.michaux.ca/articles/the-window-onload-problem-still以获得更长的讨论这个的）。此外，这是添加事件处理程序的最简单方法。

好处

  • 适用于所有可编写脚本的浏览器
  • 在所有浏览器中都一样
  • 渲染元素后立即工作
  • 添加事件处理程序的最简单方法
  • 普遍支持的防止默认浏览器行为的方法return false
  • 在一个非常简单的页面上，它是最易读的方法
  • 在 HTML 4 规范中标准化

缺点

  • 将行为与内容混合
  • 只允许一个特定对象和事件的侦听器

addEventListener/attachEvent

示例（未显示 attachEvent 等效项）

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

这是唯一允许您将多个侦听器附加到特定对象上的特定事件的方法。addEventListener在DOM Level 2 Events 规范中被标准化。

好处

  • 将行为与内容分开
  • 允许多个事件监听器
  • addEventListener是一个现代标准，在 IE 9 中得到支持，这意味着所有当前主流浏览器都将在 IE 9 发布时支持

缺点

  • 正确实现跨浏览器有点复杂
  • IEattachEvent并不完全等同于addEventListener
  • 在 HTML 源代码中的元素上，通常在加载文档之前不会分配处理程序
于 2010-08-23T11:09:15.050 回答