Question

在阅读了关于性能最佳的JavaScript之后，我学会了最大限度地减少与DOM的交互，并且更多地依赖于JavaScript本身的逻辑。

部分原因是使用单个事件侦听器来获取元素列表并读取单击目标，而不是每个事件的事件侦听器

ul#menu
  li#one One
  li#two Two
  li#three Three

$ul = document.getElementById('#menu')
$ul.addEventListener('click', function(e) {
  if (e.target.id == ...) { ... } // You get the idea
})

我有一个网站，有几个导航栏，几个下拉按钮等。那么为什么不在主体上创建单个事件监听器并只查看事件目标呢？

document.body.addEventListener('click', function(e) {
  if (e.target.id == ...) { ... };
})

我无法从技术角度说明此解决方案的错误。对我来说似乎太重了，它有一股代码味道。

这会在移动设备上出现问题吗？ DOM中<body>高的性质最终会对性能造成更大的损害吗？

我不使用jQuery ，请推荐纯JS解决方案。谢谢。

Answer 1

在阅读了关于性能最佳的JavaScript之后，我了解到最好尽量减少与DOM的交互，并且更多地依赖JavaScript本身的逻辑。

我不确定这意味着什么。无论它做什么，你是否还阅读了关于何时担心优化的部分（以后，或从不，或者你真的需要）？

部分原因是使用单个事件侦听器来获取元素列表并读取单击目标，而不是每个事件的事件侦听器

这是一个最适用于你有一百个<li>元素来监听事件的情况下的模型，所以不是将事件处理程序附加到每个元素，而是附加一个事件处理程序<ul>。就个人而言，我不相信这样做会带来如此大的好处，但无论如何这都是逻辑。

这有两个原因可能是有益的：

只有一个事件处理程序占用内存，而不是100个。在这个时代，这不太令人信服。
添加新元素时，不需要向它们显式添加事件处理程序，因为事件处理程序已经存在于它们的祖先上。这确实可以使程序逻辑更简单。

但是，将其扩展为在主体上放置一个主事件处理程序太过分了。正如一位评论者提到的那样，该事件处理程序中的逻辑将最终成为一大堆意大利面。

一个好的基本规则是将事件处理程序放在所涉及的元素上，或放在附近的祖先父元素上，以便在多个子元素/后代上以相同或相似的方式处理事件。

所以你的“疯狂”问题的答案是，是。

Answer 2

为什么你想要优化那样的东西？与单个背景图像的内存占用量或您的应用程序永远不会使用的JQuery thingies卡车相比，这是花生。至于CPU使用率，将以每小时微秒为单位进行测量。我非常怀疑你的主要性能问题将来自那里。

分解代码在任何地方都是同一个故事，无论是在JavaScript事件处理程序，OpenGL着色器还是c ++模板中。当你证明比重复编写相同代码的轻微变体更有用或更方便时，你就可以做到这一点。

你可能也想这样做，因为你的老板告诉你这样或者一些有影响力的混蛋命名它＆＃34;良好做法＆＃34;但是。

将大量的元素事件监听器委托给document.body是不是很疯狂？

2 个答案: