jQuery事件方法VS. HTML事件属性

Question

HTML事件属性：

<button id="myButton" onclick="someFunction()">Click me</button>

jQuery事件方法：

$('#myButton').click(function () { alert('Hello'); });

哪种方式更合适并提供更好的性能？

Answer 1

  

哪种方式更好？

后者，或任何其他现代方式（addEventListener等） - 例如，你不需要jQuery，尽管如果你愿意，你也可以使用它。 onxyz - 属性样式处理程序通常是一个糟糕的选择，因为：

1. 他们只能调用全局函数。通常，您希望避免使用全局函数。

2. 它们会强制您混合代码和HTML，而不是将它们区分开来。 （这可以被认为是主观的。）

请注意，这并不意味着您需要在每个元素上都有id;您可以使用CSS selectors的全部功能来查找元素（使用jQuery，或使用querySelector / querySelectorAll）以便将它们连接起来，它们不必具有{{1 }}第

确保您的代码在已知元素存在后运行。通常，known best practice是将id标记放在文档的末尾，就在结束script元素之前;此时，脚本上方的HTML定义的所有元素都将存在。

Answer 2

对于性能而言，vanilla JS方法更好，但这通常并不重要。性能损失的原因是必须加载JQuery库才能执行JQuery事件方法。如果您只使用JQuery很少，可以考虑将其替换为vanilla JS以获得性能。

同样在你的第一种情况下，你是mixin JS和html，这往往很糟糕，我们JS的数量正在增长，因为你的文件将更难阅读。通常最好的做法是分开关注（将JS / CSS放在html的单独文件中）