内联 onclick vs jquery .click() [重复]

Posted 2023-02-22

【中文标题】内联 onclick vs jquery .click() [重复]

【英文标题】：inline onclick vs jquery .click() [duplicate]

【发布时间】：2014-02-08 16:32:57

【问题描述】：

我见过两种连接事件的方法：

<input type="button" onclick=" printGrid() " value="Print" />

 $(document).ready(function () 


    $("#printGrid").click(function () 
        printGrid();
    );

);

两者之间是否有区别或好处（除了第二个使用 JQuery 的事实）？

请注意，这个问题只是关于接线，而不是使用内联 javascript。

【问题讨论】：

内联脚本是不好的做法。使用适当的事件处理程序会更好。

通过将 JavaScript 与 html 完全分离，您可以更轻松地在未来进行编辑和维护。

对于单调用操作，第一个更语义化、简洁、可读、可调试和可维护，但是以文档为中心的僵尸群众说你应该使用第二个，这样你就找不到该事件使用“检查元素”，并且必须更改两个文件才能修改 UI。

@dandavis，我认为这是正确的答案。

除了讽刺之外，如果您需要事件委托，或者在一个元素上使用多个处理程序，或者在多个事件上使用一个处理程序，则将它们连接到 js 文件中是可行的方法。对于应用程序（而不是文档）中的样板文件，在初始下载时节省几个字节不值得隐藏事件处理程序或装配一堆自定义硬编码的 js。我会强调使用类或数据属性而不是 ID，因为它使可伸缩性更容易。如果示例 jQuery 代码使用类而不是 ID，我的响应会更加平衡...

【参考方案1】：

干净多了。始终将您的 CSS、JAVASCRIPT/JQUERY、HTML 分开。

【讨论】：

在网络上永远不应该“总是”任何事情。

关于这个主题：哦，是的，先生：-P，这不像我在废品场获得了 html5 文凭：-P

如果你这么说，但我发现在早期开发过程中，它的构建速度要快得多，一页上的所有内容都可以快速轻松地进行查找和替换重构，而不会出现缓存问题。如果一个人“总是”从一开始就使用三个文件，那就更麻烦了……

我知道编程更快，但在商业世界中，您将不得不直接单独开始编程。为什么你可以问，否则你将不得不重新编程一切，这可以为你的企业/雇主节省很多钱。 ;-)

我同意 JavaScript 不应该出现在 HTML 页面中。但请注意，这不是问题：问题只是关于接线。是的，如果名称更改，我将不得不更改它——无论它在哪里使用。但就接线而言，第一种方式似乎更干净。否则，我无法通过查看按钮来判断它连接到什么。

【参考方案2】：

如果你在 5 个不同的页面上有这个按钮，你需要从 5 个不同的地方调用，那么你需要更改函数名称，你必须从所有地方更改，所以它很难维护。

在 jQuery 中使用 click 的另一个好处是浏览器缓存文件并且加载时间更短。