当我创建一个网页时，我遇到了一个困惑，我注意到有很多元素在等待点击，所以我想问：哪种练习对表演更有利
为文档添加事件侦听器，然后检查我单击的元素的类或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
})
这实际上取决于如何更好地定义，因为它非常主观。
有一件事你绝对不想做，那就是每次有人点击你页面上的某个东西时，都让你的函数运行。这是非常低效的，好的代码就是高效的代码。
从可读性的角度来看，更清楚的是，你想应用到的功能，比如按钮，就是附加到该按钮上的。如果用switch子句将所有的eventListeners附加到document，那以后将是一场噩梦。
从性能的角度来看，嗯。我想document稍微快一点，这只是因为DOM的工作方式，包括冒泡等，但节省的时间(可能是1ms(会立即在元素检查中用完。
坚持在您正在处理的元素上使用eventListeners，除非您绝对需要它在父元素上才能使用事件委派，在这种情况下，它应该尽可能靠近需要委派的元素。
更多信息和方便的图表可以在w3网站上找到。
您可以使用jsbench对代码进行基准测试。自从jsPerf关闭以来，我一直在使用它。
另一种选择是，您可以使用Javascript的console.time(<label>)和console.timeEnd(<label>)在本地工作区中执行此操作。
这里的另一个人给了你一个解决方案，让你找出哪个更快，但我会走另一个方向，因为我认为你误解了你应该寻找的东西。后者几乎可以肯定是更好的，无论你能找到什么小的性能差距。这有几个关键原因：
- 阅读前一段代码时，我问自己当这个事件触发时会发生什么？答案是我不知道，同一功能中发生的事情太多了。为了调试这个事件，我需要弄清楚哪种情况甚至失败了，以及是什么触发了它。从节省开发人员在解决方案上花费的时间的角度来看，这是低效的
- 如果你使用前一种解决方案，如果用户点击了不是navBarBtn、goUpBtn或darkModeSwitcherBtn的东西，会发生什么？正如你可能想象的那样，答案是事件触发并检查每个条件，这再次使代码容易发生奇怪的交互，尤其是如果你稍后添加其他事件。此外，从性能的角度来看，这也很糟糕，因为调用函数和检查条件是不必要的
- 这方面的标准解决方案是存在的，它是为每个需要事件的元素添加一个事件侦听器。这是一个非常常见的惯例，你应该尽可能地遵守，如果有什么不同的话，只是因为这是其他人的期望，以及你在野外发现的其他代码将如何工作。在必要的时候，当然有打破惯例的空间，但遵循这样的惯例会让你在以后的阶段更容易使用其他人的代码
简而言之，在这个问题上，性能只是转移注意力，而且是过早优化的一个非常明显的例子。这实际上不是你应该关心的问题，因为与调试那些试图做太多事情的函数相比，它对整体性能的影响非常小。