document.addEventListener对element.addEventListener

Question

当我创建一个网页时，一个困惑的事情发生在我身上，我注意到有很多元素在等待点击，所以我想问:哪个练习对我的表现更好？

为文档添加事件侦听器，然后检查我单击的元素的类或id：

document.addEventListener('click', e => {
  let element = e.target.id;
  if(element === navbarBtn) /* do something */;
  if(element === goUpBtn) /* do something */;
  if(element === darkModeSwitcherBtn) /* do something */;
})

或

为每个元素添加事件侦听器，我将单击：

navbarBtn.addEventListener('click', () => {
  // doing something
})
goUpBtn.addEventListener('click', () => {
  // doing something
})
darkModeSwitcherBtn.addEventListener('click', () => {
  // doing something
})

Answer 1

这真的取决于你如何更好地定义，因为它是非常主观的。

您肯定不想做的一件事是，每当有人单击页面上的内容时，都让您的函数运行。这是非常低效率的，好的代码就是高效的代码。

从可读性的角度来看，更清楚的是，您想要应用到的功能，比如按钮，是附加在该按钮上的。如果您将所有的eventListeners都附加到带有switch子句的document中，这将是一场噩梦。

从表演的角度来看，嗯。我可以想象document会稍微快一些，因为DOM的工作方式、冒泡等等，但是节省的时间(可能是1ms)很快就会在元素检查中用完。

坚持在您正在使用的元素上使用eventListeners，除非您绝对需要它在父元素上使用事件委托，在这种情况下，它应该尽可能接近需要委托给的元素。

更多信息，可以在w3站点上找到一个方便的图表。

Answer 2

您可以使用jsbench对代码进行基准测试。自从jsPerf坏了我就开始使用它了。

另一种选择是，您可以使用Javascript的console.time(<label>)和console.timeEnd(<label>)在本地工作区中执行此操作。

Answer 3

这里的另一个人给了你一个解决方案，找出哪个更快，但是我会走一个不同的方向，因为我认为你误解了你应该寻找的东西。后者几乎可以肯定是更好的，不管你能找到什么微小的性能差距。这有几个关键原因：

• 阅读前一段代码，我会问自己，当这个事件触发时会发生什么？答案是我不知道，在同一个函数中发生的事情太多了。要调试这个事件，我需要弄清楚到底是哪种情况失败了，是什么触发了它。从节省开发人员在解决方案上花费的时间的角度来看，这是效率低下的。
• 如果使用前一种解决方案，如果用户单击一些不是navBarBtn、goUpBtn或darkModeSwitcherBtn的东西会发生什么？正如您可能想象的那样，事件触发并检查每个条件，这再次使代码容易发生奇怪的交互，特别是在以后添加其他事件时。此外，从性能的角度来看，这也是不好的，因为您调用函数和检查条件是不需要的。
• 这方面的标准解决方案是存在的，它是为每个需要事件的元素添加一个事件侦听器。这是一个非常普遍的惯例，您应该尽可能多地遵守它，如果有的话，仅仅因为这是其他人所期望的，以及您将在野外发现的其他代码将如何工作。在必要的时候，当然还有打破约定的空间，但遵循这样的约定将使您在稍后阶段更容易使用其他人的代码。

总之，性能是这个问题中的一个难题，而且是一个非常明显的过早优化的情况。这实际上不是您应该关注的问题，因为它对整体性能的影响非常小，与您可能失去的调试功能的时间相比，这些功能要做的事情太多了。