javascript-事件-将它们放置在何处？

我希望在js开发人员的社区中，我们能够就此达成共识：

我们应该声明还是单击，onkeyup。。。等HTML文档内部或外部的事件

我确实喜欢把它们分开。符合事实的 2我也知道HTML5在游戏中添加了一些新的交互元素

问候,，

---

MEM

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

考虑阅读和。

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

甚至访问“element.onkeyup”这样的属性也是一个非常糟糕的主意

使用侦听器。最好是一个框架

编辑：这就是为什么蒂姆·唐恩的评论是荒谬的：

如果任何编程决策的基本原理都是从“如果你知道你只需要。。。那就别这么做。真的

所有可编写脚本的浏览器实际上都意味着IE5.5+FF2+Safari3+Opera9+。这覆盖了99%以上的web用户，所有这些浏览器都支持事件侦听器。与访问事件处理程序属性相比，事件侦听器具有主要优势——最大的优势是任何事件都可以有多个侦听器。在现代Javascript编程中，这种情况经常发生。只因为你可以使用过时的事件处理系统而对你的代码进行特殊的包装是一个糟糕的想法，对真正好的想法是不友好的，比如使用库和编写不引人注目的、一致的代码

返回false；是一种完全违反直觉和反语义的方法，用于表示停止在DOM树上/下冒泡/传播此事件。你知道什么是直觉吗？库代码中的常见表达式，如event.stop

---

当前流行的观点是，一切都必须是不引人注目的，这意味着事件处理程序属性，如someElement.onclick=functione{…}；被广泛反对，事件处理程序属性（如）被彻底忽略。事实上，两者都有有效的用途

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

总之，对于给定的任务，使用最简单的方法来满足您的需要

事件处理程序属性 实例 对于将事件处理程序分配给您在脚本中创建的元素来说，这些方法特别有用，并且可以确定只需要一个侦听器

优势 将行为与内容分开 适用于所有可编写脚本的浏览器 除了事件对象来自IE中的window.Event和其他浏览器中的function参数之外，在所有浏览器中的工作方式都是相同的 使用return false防止默认浏览器行为的普遍支持的方法 缺点 对于特定对象和事件，只允许一个侦听器 在HTML源中的元素上，在加载文档之前通常不会分配处理程序 事件处理程序属性 实例 这是唯一允许您将多个侦听器附加到特定对象上的特定事件的方法。addEventListener在中是标准化的

优势 将行为与内容分开 允许多个事件侦听器 addEventListener是一个现代标准，支持IE9，这意味着当前所有主流浏览器都将支持IE9的发布 缺点 要正确实现跨浏览器，有点复杂 IE的attachEvent并不完全等同于addEventListener 在HTML源中的元素上，在加载文档之前通常不会分配处理程序

---

@所有——html5的新出现又如何呢。我们能做同样的事情吗。Html5有新的活动要玩，不是吗？我想知道我们是否也可以使用那里的技术。。。在这背后，我发现我不清楚这些事件的性质，或者它们属于DOM核心，或者它们属于javascript核心，不是吗？我无法预见HTML5会改变将JS代码和HTML分开的建议-希望人们能找到更好、更清晰的方法。@MEM：HTML5没有改变任何东西。您有新的事件，但实践是相同的。这里我有一个关系：希望动态检查或修改网页的JavaScript脚本需要DOM。换句话说，文档对象模型是JavaScript查看其包含HTML页面和浏览器状态的方式。非常感谢监听器的建议以及框架一。。。我将尝试了解更多关于事件侦听器的信息。胡说八道。如果您知道在元素上只需要一个事件处理程序，那么element.onkeyup就是最好的选择。首先，它在所有可编写脚本的浏览器中都能工作，在exc中的工作方式完全相同

---

在所有事件中获取事件对象的位置。第二，防止事件的默认行为的机制只是返回false；在所有浏览器中。明白了。事实是，我只需要一个。但我是一个愚蠢的慢程序员，希望自己尽可能可靠，程序员。一天这就是为什么我在一个只有100条或更少记录的数据库上使用PDO的原因。哦，好吧。。。然而，有时候，我们需要完成它，我只是希望，当那一天来到js端时，我可以说：是的，我将立即编写js侦听器的代码；但为了做到这一点。。。我相信，我们真的需要受苦。这就是我所知道的K.问候：梅：对不起。我的胡说八道。过于咄咄逼人，直指Triptych。Triptych:1。什么这种笼统的说法会导致过度设计和一事无成。如果不首先定义您的需求，您就不能做任何事情。2.我不太明白你关于特定浏览器的观点。我的看法是，支持事件处理程序属性的浏览器比支持addEventListener/attachEvent的浏览器多。如果你的观点是，不支持侦听器的浏览器现在在很大程度上已经无关紧要了，那么我同意这一点。而且，过时并不意味着坏。3.返回false并不是你所说的意思。这意味着不要执行默认的浏览器操作。+1和顺便说一句，当你说addEventListener/attachEvent在跨浏览器中正确实现是复杂的，这不是真的，可能是因为人们已经习惯于使用JS库，甚至不知道它有多简单，Marco：我以前写过跨浏览器addEventListener/attachEvent wrappers，我同意这并不难，但有几个问题不是很明显，比如侦听器函数中的这个问题，以及如何将事件对象传递到侦听器函数中。两者都很容易解决，但你需要了解它们。

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

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

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