【问题标题】:Event Listener Remove or Keep - Best Practice事件侦听器删除或保留 - 最佳实践
【发布时间】:2015-04-17 20:10:09
【问题描述】:

我的网页上有很多 jquery / javascript 侦听器,我会尽可能减少它们。但是,对于剩下的听众,在某些情况下我会在某些时候将他们设为display:none。以下是我的问题:

1)关于监听器的最佳实践是什么,我应该在显示/隐藏元素时添加或删除监听器吗?

2)哪个是最好的性能明智的?

3)如果我最终有很多听众,最好将 on listener 事件应用于整个身体,还是最好只将听众应用于需要听的事情?

【问题讨论】:

  • 如果你稍后要显示它,隐藏通常比一起删除它更好

标签: javascript jquery listener


【解决方案1】:

一般的经验法则如下:

删除拆卸事件。

由于您没有删除 DOM 元素,因此侦听器应该保持不变,除非您有数十万个侦听器,否则在性能方面没有缺点。

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


  1. 删除元素时删除侦听器(拆卸)。
  2. 监听应用于多个元素而不是单个元素的通用类,如果需要,使用数据属性来识别它们。
  3. 倾听需要倾听的东西。

当您有大量孩子需要通过监听父级来监听时,您还可以使用事件委托(冒泡):

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

【讨论】:

  • 您好,您能否更新您对我更新后的问题的回答?对不起,我很痛苦!
  • @TristanComley 确定,我已经相应地更新了我的答案:)
【解决方案2】:

1/2) 关于监听器的最佳做法是什么,我应该在显示/隐藏元素时添加或删除监听器吗? --> 添加/删除事件很慢。您可能可以对其进行基准测试,但最好的建议是保留它们并让垃圾收集处理它,以防您删除对象。它可以节省您的代码并且可能更具可读性,而且垃圾收集(清理)应该在用户不等待/交互时理想地发生(取决于实现和许多其他事情)。

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

3) 如果我最终有很多听众,最好将 on listener 事件应用于整个身体,还是最好只将听众应用于需要收听的事情? --> 多少。无论哪种方式,您的代码都可读吗?如果您最终监听整个主体,您的代码将处理更多事件(鼠标悬停在每个对象上、单击、键盘输入等),通常您会希望只过滤掉相关事件并将它们分派到功能。这会使您的代码非常混乱(大量的 if/then),最终会导致您在性能方面的成本超出您的预期。最好的办法是只处理与您的流程相关的对象上的事件。更简单,更容易,更快。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-05
    • 2014-11-24
    • 2014-10-13
    • 1970-01-01
    • 2018-09-04
    • 1970-01-01
    • 2022-08-03
    相关资源
    最近更新 更多