Javascript性能？ - 将事件放在html标记中，还是绑定它们？

Question

我想知道哪个更适合表现......我有一个“网络应用程序”的东西。它有很多javascript。单击按钮时，隐藏的div变为可见。这个新的div有5个按钮。哪种方式更适合性能：

1。）将按钮点击事件放在每个按钮的html标签中，如onClick =“alert（'hey'）;” 2.）当div可见时将事件附加到每个按钮，然后当我隐藏包含按钮的div时删除事件？

我问的原因是因为我认为如果html标签中的事件始终存在，页面可能会陷入困境。我认为当用户可以看到按钮点击它们时，页面可能更快，只有那些事件。

任何帮助都很棒！谢谢！

Answer 1

我会使用 event delegation 。

通过这种方式，您可以自由添加/删除任何按钮，而无需担心在每个按钮上附加事件。这种方法也更节省内存，因为在每个按钮上总是只有一个事件处理程序而不是N个。

Answer 2

除非这些事件导致某些东西充当链接（谷歌似乎学会了阅读），否则将所有这些JS放在HTML之外。它使您的代码更整洁，更易于维护。 无法确定性能。

Answer 3

在隐藏元素时保持事件处理程序的注册将不会影响性能，因为事件不会触发。

是否使用HTML属性或DOM来注册事件处理程序不是性能问题，而是一个简洁的设计问题。您希望将演示文稿尽可能与行为分开。这意味着如果使用属性，它们应该只将事件绑定到处理程序（即调用单个函数），而不是包含更复杂的代码。也就是说，不要：

<button onclick="if ('red'==this.parent.style.backgroundColor) {...}">...</button>

做的：

<button onclick="clickColorButton(event)">...</button>