将大量元素事件侦听器委托给 document.body 是不是很疯狂？
[英]Is it crazy to delegate tons of element event listeners to document.body?
问题描述
After reading about optimally-performing JavaScript, I learned it's best to minimize interaction with the DOM, and rely more on the logic within JavaScript itself.
在阅读了性能最佳的 JavaScript 之后，我了解到最好尽量减少与 DOM 的交互，并更多地依赖 JavaScript 本身的逻辑。
Part of this is using a single event listener for a list of elements and reading the click target, rather than an event listener for each and every one其中一部分是对元素列表使用单个事件侦听器并读取点击目标，而不是为每个元素使用一个事件侦听器
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
})
I have a website that has several navbars, several dropdown buttons and such.我有一个网站，有几个导航栏、几个下拉按钮等。 So why not create a single event listener on the body and just look at the event target?那么为什么不在主体上创建一个事件侦听器并只查看事件目标呢？
document.body.addEventListener('click', function(e) {
if (e.target.id == ...) { ... };
})
I can't tell what's wrong with this solution from a technical perspective.从技术角度来看，我无法判断此解决方案有什么问题。 Something just seems too heavy to me, it has a code smell to it.有些东西对我来说似乎太重了，它有一种代码味道。
Would this be problematic on mobile?这在手机上会不会有问题？ Does the nature of <body> being high in the DOM end up doing more damage to performance than good? <body>在 DOM 中处于高位的性质最终对性能造成的损害大于好处吗？
I'm not using jQuery , please suggest pure JS solutions.我没有使用 jQuery ，请建议纯 JS 解决方案。
2 个解决方案
解决方案1
4
After reading about optimally-performing JavaScript, I learned it's best to minimize interaction with the DOM, and rely more on the logic within JavaScript itself.
I'm not sure what this means.我不确定这意味着什么。 Whatever it does, did you also read the part about when to worry about optimization (later, or never, or when you really have to)?不管它做什么，您是否还阅读了有关何时担心优化的部分（稍后，或永远，或当您真的需要时）？
Part of this is using a single event listener for a list of elements and reading the click target, rather than an event listener for each and every one
This is a model which is best applied in cases such as where you have a hundred <li> elements to listen to events on, so rather than attaching event handlers to each and every one, you attach one event handler to the <ul> .这是一种模型，最适用于例如您有一百个<li>元素来监听事件的情况，因此，您无需将事件处理程序附加到每个元素，而是将一个事件处理程序附加到<ul> 。 Personally, I'm not convinced that there's such a major benefit from doing this, but in any case that is the logic.就个人而言，我不相信这样做有这么大的好处，但无论如何这是逻辑。
There are two reasons why this could be beneficial:这可能是有益的，有两个原因：
There is only one event handler occupying memory, instead of 100. In this day and age, that is not too convincing.
只有一个事件处理程序占用内存，而不是 100 个。在这个时代，这不太令人信服。When new elements are added, there is no need to explicitly add event handlers to them, since an event handler is already in place on their ancestor.
添加新元素时，无需显式向它们添加事件处理程序，因为事件处理程序已在其祖先上到位。 This could indeed make program logic simpler.这确实可以使程序逻辑更简单。
However, extending that to putting one master event handler on the body is going way too far .但是，将其扩展到在主体上放置一个主事件处理程序太过分了。 As one commenter mentioned, the logic in that event handler is going to end up being a massive pile of spaghetti.正如一位评论者所提到的，该事件处理程序中的逻辑最终将成为一大堆意大利面条。
A good basic rule is to put event handlers on the element involved, or on a nearby ancestor parent element to handle events in the same or similar ways on multiple children/descendants.一个好的基本规则是将事件处理程序放在所涉及的元素上，或者放在附近的祖先父元素上，以便在多个子/后代上以相同或相似的方式处理事件。
So the answer to your question of "is it crazy" is, yes .所以你的“是不是疯了”的问题的答案是，是的。
解决方案2
0 2014-10-31 13:06:09
Why would you ever want to optimize something like that?为什么你会想要优化这样的东西？ Compared with the memory footprint of a single background image or the truckload of JQuery thingies your application will never use, that's peanuts.与单个背景图像的内存占用或应用程序永远不会使用的大量 JQuery 事物相比，这简直是小菜一碟。 As for CPU usage, that would be measured in microseconds per hour.至于 CPU 使用率，则以每小时微秒为单位。 I very doubt your main performance issue will come from there.我非常怀疑您的主要性能问题将来自那里。
Factorizing code is just the same story anywhere, be it in a JavaScript event handler , an OpenGL shader or a c++ template.分解代码在任何地方都是一样的，无论是在 JavaScript 事件处理程序、OpenGL 着色器还是 c++ 模板中。 You do it when it proves more useful or convenient than writing slight variations of the same code all over again.当它被证明比重新编写相同代码的微小变化更有用或更方便时，你就会这样做。
You might also want to do it because your boss told you so or some influential jerks named it "good practice", though.不过，您可能也想这样做，因为您的老板告诉过您，或者一些有影响力的混蛋将其命名为“良好做法”。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.