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

有人可以告诉我使用这两者之间的区别吗？

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

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

关于哪一个被称为第一个

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

效率更高，如果我同时使用它们，它们会起作用吗？

两者都有效。但是如果你对这个事件有各种各样的事情呢？将它放在内联脚本中会对此保持警惕。

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

Answer 2

如果您按照CSS的工作原理进行思考，

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

通过这个，我的意思是每个中的第一个是混合您尝试做的页面声明和呈现的实际功能。＆＃34;清洁工＆＃34;方法是采用分离关注点的方法 - 允许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 3

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

我更倾向于选择1st，原因很简单，原因很简单，因为它表示＆＃34; jQuery是轻量级的，＃34;写得更少，做更多＆＃34;，JavaScript库。＆＃34;

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

使用ID和onClick之间的区别

3 个答案: