事件侦听器删除或保留 - 最佳实践

Question

我的网页上有很多 jquery / javascript 听众，我会尽可能减少他们。但是，对于留下来的听众，在某些情况下我会在某些时候让他们 display:none。这是我的问题：

1）关于听众的最佳实践是什么，我应该在显示/隐藏元素时添加或删除听众吗？

2）哪个是最好的性能明智？

3) 如果我最终有很多听众，最好是对整个 body 应用一个 on listener 事件，还是最好只对需要听的东西应用听众？

Answer 1

一般的经验法则如下：

Remove events on teardown.

由于您没有删除 DOM 元素，因此监听器应该持续存在，性能方面没有缺点，除非您有数十万个监听器。

微观管理隐藏元素侦听器所花费的时间不足以抵消任何感知到的性能提升。

移除元素时移除侦听器（拆解）。
聆听应用于多个元素而不是单个元素的通用 class，如果需要，使用数据属性来识别它们。
该听的就听。

当您有大量需要通过监听父级来监听的子级时，您也可以使用事件委托（冒泡）：

$('div').on('click', function (e) {
  // check e.target for specific child node you require listening on
})

Answer 2

1/2) 关于监听器的最佳实践是什么，我应该在显示/隐藏元素时添加或删除监听器吗？ --> Adding/removing 事件很慢。您可能可以对其进行基准测试，但最好的建议是保留它们并让垃圾 collection 处理它，以防您删除 objects。它可以节省您的代码并且可能更具可读性，而且理想情况下应该在用户不 waiting/interacting.

时发生垃圾 collection （清理）（取决于实现和许多其他事情）

2) 哪个性能最好？ --> 请参阅 1。如果您不确定，请对其进行基准测试。

3) 如果我最终有很多听众，最好是对整个 body 应用一个 on listener 事件，还是只对需要听的东西应用听众？ --> 多少。无论哪种方式，您的代码都可读吗？如果您最终收听了整个 body，您的代码将处理更多事件（将鼠标悬停在每个 object、点击、键盘输入等上）并且通常您会想要过滤只输出相关事件并将它们分派给函数。这会使您的代码变得非常混乱（很多 if/then），并且最终会使您在性能上付出的代价比您想节省的要多得多。最好的办法是只处理 object 上与您的流程相关的事件。更简单、更容易、更快。

事件侦听器删除或保留 - 最佳实践

Event Listener Remove or Keep - Best Practice

javascript

jquery

listener