javascript - 使用ID和onClick之间的区别

Question

这个问题已经有答案了:

onclick="" vs event handler (9 个回答)

addEventListener vs onclick (21 个回答)

已关闭 7 年前。

如果这篇文章之前已经发表过，但我找不到它，我深表歉意。

想象一下我们有

<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 样式表处理样式方面一样，而不是声明样式内联。

除了少数异常(exception)，结果通常更易于移植和维护。它还可以让您免于将来遇到一些小麻烦。例如，如果您要将函数 foo 重命名为 bar，并且在函数的 50 个位置声明 onclick='foo()'网站，嗯，对 onclick 属性进行了 50 处更改。如果您使用替代方案(通过 ID 将元素绑定(bind)到 javascript)，您只需进行一行更改。

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

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