Javascript 何时何地添加单击处理程序？

我知道内联

onclick=…

风格的处理程序很糟糕，但我很欣赏它们是如何立即激活的

不过，现在是现代，所以让我们继续前进。现在，我应该在何时何地放置我的单击处理程序（通过

元素.addEventListener

或jQuery的

单击添加）？我希望在
正文的末尾
，但我不确定。我找不到一个可靠的来源来教育我

此外，我应该将它们全部添加到内联
脚本
元素中，还是应该在那里放置一个单独的函数调用（例如，“setupEventHandlers”），并在js文件中定义它？我想用适当的和普通的，以便坚持正确的原则

但是加载速度慢的页面呢？我是否应该期望用户等待按钮开始工作？用户喜欢点击东西！尤其是那些等待加载速度较慢的网站的用户感到厌烦。
关于内联处理程序“不好”的争论源于早期，那时网页设计开始吸引程序员，而不仅仅是只懂一点代码的设计师。对于这些人来说，分离关注点很重要，比如用户界面（HTML）和逻辑（JS）——或者用MVC术语来说，视图和控制器。换句话说，视图应该只关心呈现内容，控制器应该关心处理行为

事实上，HTML告诉浏览器通过在元素上放置属性来触发事件。Jquery只是以编程的方式执行此操作，但结果与您自己将属性放置在那里的结果相同。因此，关于最佳实践有很大的争论空间，而且没有人必须同意，这对政党来说是好的，但对想知道答案的人来说是坏的

将逻辑与视图分开的好处已经有很好的文档记录（Google的“模型-视图-控制器模式”）

我要说的是，我们已经到了这样一个地步，分离处理人员正成为公认的最佳实践。但是像Angular这样的框架已经将东西发送到freefall中，它不仅允许在HTML中放置事件处理程序，还允许在HTML中放置各种逻辑、条件和表达式

因此，归根结底，这取决于个人的选择，这意味着你需要考虑你自己情况的利弊。为了帮助你们，以下是我自己关于正反两方面的初步想法

专业人士

使HTML对设计师的作用更加清晰
需要更少的代码
缺点

允许设计师通过调整
设计
你必须看多个地方才能明白什么是
进行中
需要更多代码
对我个人来说，前两个缺点是一个大问题，足以使它成为一个坏主意，把点击内联…但你的里程可能会有所不同

这就留下了放置它们的问题。选择是

在
中的
标记中
在
-开始或结束的
标记中
在一个单独的
.js
文件中，该文件以与1相同的方式引用。或2
同样，这一切都归结于个人选择。对我来说，如果我正在编写一个包含20行代码的原型，我可能会把它扔进标题中的一个标记中。但一旦它开始增长，我几乎肯定会将它分离成一个.js文件，这样我就可以忽略标记，只关注代码

最后，在哪里调用脚本？这又归结为个人选择。您已经开始回答自己的问题-您希望您的页面在显示后立即具有交互性。这使得将脚本放在页面顶部成为一个好主意，但这会减慢渲染速度。将它们放在页面的末尾可以让用户更快地查看内容，但必须等待功能的创建

所以说这一切真的有很长的路要走——这要看情况而定。老实说，你的问题表明你已经知道了很多优点和缺点，所以我想说，按照对你有效的方法去做，忽略任何告诉你有规则的人。
他们并不“坏”。他们和一切事物一样，都有自己的优点和缺点。有些人只是倾向于将编程中的事情视为道德上的绝对。不要让他们限制你。做出明智/明智的决定，你会没事的。就我个人而言，我喜欢内联点击处理程序-它到底有什么问题？是的，是的，我们都喜欢它们，但它们不好：。我现在被他们不愿意停止冒泡绊倒了，即使在对各种对象调用了
stopPropagation
之后也是如此。如果你有一个小脚本，你可以将它丑化并放入
script
标记中。当页面加载时，脚本会立即执行。它们没有什么不好的，我也不是特别“喜欢”它们。使用这种语言的人经常重复他们在互联网上听到的东西。如果你对冒泡有意见，可以问一下。它们只是事件处理程序，你可以同样轻松地停止传播。有趣的是，人们引用了内联处理程序的所有缺点，但随后他们添加了类，只是为了让JS稍后连接处理程序，这同样存在潜在的问题。我只是看不出
onclick=“foo（event）”
和
class=“some\u other\u class foo\u js”
之间有什么区别。它们都需要维护以保持协调。等等，我可以改变主意！我一开始的假设是他们很糟糕。如果你能让我相信他们很棒，那么请！说服我@他们既不坏也不伟大。他们只是存在。你认为合适的话就用它们。@斜视，那么你建议/使用什么呢？你如何选择目标元素？@Vohuman:我会根据情况做出决定。如果我遇到零延迟非常重要的情况，我非常愿意使用内联处理程序。我的理念是，不要扔掉任何工具，而是使用适合工作的工具。