将点击事件存储在正文或单个元素组上是否更有效

Question

我读了以下内容:

"如果用户可以与页面上的许多元素进行交互,则向每个元素添加事件侦听器可能会占用大量内存并降低性能......

...因为影响包含元素的事件可以将事件处理程序放在包含元素上,并使用事件目标属性来查找事件发生在哪个子节点上"

那么,在主体上执行一次单击事件然后委派正确的函数有什么缺点呢？

我在这里有一个例子:http://jsfiddle.net/jkg0h99d/3/

死锁的代码备份:

HTML:

<div id="test" class="box">gfdgsfdg </div>
<div id="test2" class="box">gfdsgfdsg</div>
<div id="test3" class="box">fdsgfdsgg</div>
<ul id="test4" class="box">
    <li id="test5" class="box">fsgfdsg</li>
    <li id="test6" class="box">gfdsgfds</li>
    <li id="test7" class="box">gfdsgfds</li>
    <li id="test8" class="box">gfdsgfds</li>
</ul>

JS:

var body = document.body;

if (body.addEventListener) {
    body.addEventListener('click', function (e) {
        delegate(e, "click");
    }, false);
} else {
    body.attachEvent('onclick', function (e) {
        delegate(e, "click");
    }, false);
}


function delegate(e) {
    var sourceNode = e.target || e.srcElement;
    var id = sourceNode.id;
    switch (id) {
        case ("test"):
            // do some func
            break;
        case ("test2"):
            // do some func
            break;
        case ("test3"):
            // do some func
            break;
        case ("test4"):
            // do some func
            break;
        default:
            // do nothing
            break;

    }
}

有趣的一点:每次用户点击它都会引发一个事件.但是,这真的会成为一个问题吗？它只是通过一个开关检查(或者如果检查可以)

这一点仅仅是一种兴趣,但是用户已经询问了点优化.我想这可以很快进一步优化,但我将继续讨论主题.

Answer 1

与大多数此类性质的事情一样，答案是“视情况而定”，您需要选择一个中间立场。一般来说，建议将事件放置在 DOM 树中至少相对靠近其源的位置，以避免过度冒泡，并避免将事件放置在 DOM 树上，除非body有必要。

例如，您可以在 s 上放置一个处理程序ul来处理 s 的事件委托li：

document.getElementById('test4').addEventListener('click', function (e) {
    // handle event for li
});

这让您两全其美，因为您：

• 将一个事件绑定到您的 DOM 来处理li点击，而不是为每个事件创建一个单独的副本li
• li如果动态修改 s集，则不必重新附加事件
• 起泡最少（只有一级）
• 不必在又大又难看的 switch 语句中复用逻辑

所以我认为这是一个值得牢记的原则。