我认为内联onclick=… - 样式处理程序很糟糕，但我很欣赏它们如何活跃。
尽管如此，这些都是现代的，所以让我们继续前进吧。现在，我应该在何时何地放置我的点击处理程序（通过element.addEventListener或jQuery的click添加）？我期待body的结尾，但我不确定。我无法找到一个有信誉的来源给我上学！
另外，我应该在内联script元素中添加它们，还是应该在那里放置一个单一的函数调用（例如“setupEventHandlers”），并在js文件中定义它？我想使用正确和常见的东西，以便遵守Principle of Least Astonishment。
但缓慢加载页面怎么样？我应该期望用户等待按钮开始工作吗？用户喜欢点击东西！特别是无聊的用户正在等待一个缓慢的网站加载。
答案 0 :(得分：3)
关于内联处理程序“坏”的论点源于早期的网页设计开始吸引程序员，而程序员不仅仅是设计师的代码。对于那些人来说，分离关注点（例如用户界面（HTML）和逻辑（JS））或MVC术语（视图和控制器）非常重要。换句话说，视图应该只是担心呈现内容，控制器应该担心处理行为。
现实情况是HTML告诉浏览器通过在元素上放置属性来触发事件。 Jquery只是以编程方式执行此操作，但结果与您自己放置属性的结果相同。因此，对于最佳实践存在很大的争论空间，没有人必须同意，这对于派对来说很好，但对于想要了解答案的人来说却是不好的。
保持逻辑与视图分离的好处已有详细记录（Google的“模型 - 视图 - 控制器模式”）。
我会说我们已经达到了分离处理程序成为公认最佳实践的程度。但是像Angular这样的框架已经让事情发生了自由落体，允许你不仅在HTML中放置事件处理程序，而且放置各种逻辑，条件和表达式。
因此，最终归结为个人选择，这意味着您需要根据自己的情况考虑利弊。为了帮助你，这是我自己对利弊的初步想法。
赞成
CON外
对于我个人来说，前两个缺点是一个足够大的交易，以使点击内联是一个坏主意...但你的里程可能会有所不同。
这留下了放置它们的位置的问题。选项是
<script> <head>标记中
<script>中的<body>标记 - 开头或结尾。.js文件中，其引用方式与1.或2相同。同样，这一切都取决于个人选择。对我来说，如果我正在编写一个包含20行代码的原型，我可能会将其放入标题中的标记中。但是一旦它开始增长，我几乎肯定会把它分成一个.js文件，允许我忽略标记，只关注代码。
最后，在哪里调用你的脚本？这再次归结为个人选择。您已经开始回答自己的问题了 - 您希望页面在显示后立即进行交互。这使得将脚本放在页面顶部是一个好主意 - 但这会降低渲染速度。将它们放在页面的末尾将允许用户更快地查看内容，但必须等待创建功能。
所以这一切都是很长的路要走 - 这取决于。说实话，你的问题表明你已经了解了很多优点和缺点，所以我想说一下对你有用的东西，并且忽略那些曾经告诉你有规则的人。