使用 ID 和 onClick 的区别 [重复]

Question

如果此帖以前发过但我找不到，我深表歉意。

想象一下我们有

<button class="sample-class" role="button" tabindex="0" id="onEvent">play</button>

然后是一个 Javascript 来触发它，就像这样

<script>
     $("#onEvent").click(function(){
       //do something
     })
<script>

如果我们有同样的东西

<button class="sample-class" role="button" tabindex="0" onClick="foo()">play</button>

我们通过

触发它

<script>
  function foo()
  {
     //Do something
  }
</script>

有人能告诉我使用这两者的区别吗？至于哪个先调用，哪个效率更高，如果我同时使用它们，它们会起作用吗？

谢谢！

Answer 1

如果您将其与 CSS 的工作原理类似地考虑，

onclick= : id= :: style= : class=

我的意思是，第一个是将您尝试执行的实际功能与页面的声明和呈现混合在一起。 “更清洁”的方法是采用关注点分离的方法——允许 HTML 成为演示者，让 JavaScript 处理功能，就像 CSS 样式表处理样式方面一样，而不是声明样式在线。

结果，除了少数例外，通常更易于移植和维护。它还可以使您免于将来的小麻烦。例如，如果您要将函数foo 重命名为bar，并在网站的50 个位置声明onclick='foo()'，那么这就是对onclick 属性的50 次更改。如果您使用替代方法（通过 ID 将元素绑定到 javascript），则只需一行更改。

另外，请注意，您不仅限于匹配 ID。您也可以将 javascript 方法附​​加到类，或将两者结合使用，这样您就可以拥有很大的灵活性，而无需在 HTML 中添加额外的标记。

有关与您的问题相关的整体概念的更多详细信息，请参阅： https://en.wikipedia.org/wiki/Unobtrusive_JavaScript#Separation_of_behavior_from_markup

Answer 2

有人能告诉我使用这两者的区别吗？

第一个代码是使用外部脚本来完成任务。但是第二个代码是使用内联脚本来完成任务。事件处理程序没有区别，只是使用代码调用事件的方式不同。

我们大多数人都使用第二种方法，即。说避免使用内联脚本。

根据哪个先被调用

如果您将脚本保留在正文的结束标记之前，则浏览器将在加载脚本之前先加载内联脚本。如果你在 head 标签中使用脚本，那么这个代码将首先被调用。

哪个更有效，如果我同时使用它们，它们会起作用吗？

两者都可以。但是，如果您与该事件有各种关系怎么办？将它放在内联脚本中会对此保持警惕。

您不必担心使用外部脚本，即。如果有人担心用户是否禁用了浏览器，则脚本不会运行。因为现代网站都是用 javascript/jquery 组成的。因此，您可以强制访问者启用 javascript 以正常运行网站。

Answer 3

这两种方式的工作方式相同。但是要使第一个工作正常，您需要添加 jquery 文件引用。

我更喜欢第一个，原因很简单，因为它说“jQuery 是一个轻量级的，“少写多做”的 JavaScript 库。”

如果你想在多个 div 上添加点击功能，如果你使用 onclick 功能，你将不得不在任何地方编写 onclick 并且在 html 中编码太多不是一个好习惯。但是如果你使用点击功能，你可以给一个通用类，调用所有的点击函数。