在JavaScript中附加事件

作为对其中一个问题的评论，一位评论者写道（我的重点）：

。。。通过使用内联的“onclick”，您正在做类似的事情，但它更难维护，更容易出现问题JavaScript社区作为一个整体已经离开内联JavaScript有一段时间了。

这是指使用

$("#someID").click(function(){
    do something here...;
});

而不是

<a id="someID" onclick="someFunction();">

---

。它询问如何在每个选项卡上附加不同的单击事件。我的回答是废话吗？我是否应该向FallenRayne道歉？）。
是的，至少在社区的某些部分，不知道你会如何衡量它

在我脑海中，绝对有优势：


更干净/更少的代码
易于调试
更容易改变
易于包装
演出

仅从体积来看，可以这样想：

<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">
<a onclick="someFunction();">

大多数框架都可以通过css选择器来实现这一点，等等，它可以同时处理许多元素。这意味着在服务器代码中，您只需分配ID和类，客户端更容易单独处理。它也更容易调试，例如：在控制台中，我可以执行
$（'a'）。解除绑定（'click'）。单击（…一些新的

另一个好处是性能。如果我能把它分割成一个单独的
.js
文件，由客户端缓存，那就是更薄的网页和额外的数据，我不会每次都发送。网页越小=加载速度越快

这里还有一个例子，考虑到它是多么简单，通过jQuery允许一些框架操作，但是这对于内联事件会是什么样子呢

$("li").hover(function() {
  $(this).children().slideToggle();
});

相比之下，这是大量的内联代码，即使你省略了动画部分，它也是杂乱无章的（想想
mouseenter/mouseleave
，而不是
mouseover/mouseout
。
.hover（）
使用的前者更复杂）

是否真的有一种改变，即不再采用传统的将事件内联宣布的方式

是的，这是肯定的，特别是随着jQuery、Prototype等JS框架的兴起，所有这些都鼓励以“新学校”的方式宣布事件

如果是的话，另一个的好处是什么

其中一个主要原因是HTML结构和JavaScript编程智能之间的分离（可以说两者是分离的）。它使标记更清晰、更易于维护，而所有的编程逻辑都保存在单独的文件中，这具有加载性能优势和更好的可维护性-您拥有包含代码的适当库，而不是到处都是JS代码片段。
最大的好处是内容（html）和动作/行为（javascript）的分离。这被称为。保持这两个事件处理程序分开，可以更容易地进行更改，而不会影响其他事件处理程序。
使用内联声明，您只能分配一个事件处理程序，而在代码中，您可以分配任意多的事件处理程序。另外，如果您需要将同一事件处理程序分配给多个元素，那么使用javascript执行该操作更简单、更简短，而且您遵守了DRY原则。
我总是尽量避免将代码放入document.ready（），我不应该将此$（“a”）。单击document.ready（）中的（function（）{..}）按钮吗？只是我有点讨厌它。坏吗？@Mahesh-是的，你应该将所有绑定事件包装在
$（文档）中。ready（function（）{}）
，或者更短的：
$（function（）{}）
@Nick Craver：是的，我理解在类或元素类型上做选择器的好处是比将所有声明内联更干净。当涉及到连接到ID时，似乎是一个六个，另一个六个。您的个人资料提到您使用WebForms做了大量工作。当您将JS移动到单独的文件中时，您有点失去了执行
$（#“”）
样式选择器的能力，您如何解决这个问题？@R0MANARMY-您使用一个类：）或者，如果您需要匹配一个ID，并且您知道它是什么，您可以多次使用带有选择器的结尾，如：
$（“[ID$=mylementid]”
，您发现实际上不需要
runat=“server”
，而正常的
#id
选择器工作正常……只是取决于实际的服务器控件需要什么。不过类方法总是有效的。@Mahesh:jQuery提供了
live
方法（）来订阅尚未定义的元素上的事件处理程序。@Pekka:是的，我在当前项目中遇到了“到处都是代码片段”。如果你能推荐一些关于如何构造富JS界面的阅读资料，那就太棒了。@r0你可以查看rosscj发布的维基百科链接中的参考资料部分，这是一些很好的入门资料；但是，这个处理程序可以用来调用其他几个函数。很多人已经解释并演示了将事件处理程序放在JS文件中的好处，但我很好奇是否有人能想到内联JS事件的好处，除了简单之外。@Richard JP Le Guen:这个问题作为一个CW可能更好？@Richard-CW=一个社区维基问题
$("li").hover(function() {
  $(this).children().slideToggle();
});