Javascript 事件侦听器影响？

事件列表有什么影响？我说的是大数字，下面是一个例子：

• 最初只有x数量的

  .marker

• 单击

  .marker

  时，通过

  JS

  添加所有子项-eventlistener
• 每个孩子都做自己的事情，这意味着他们每个人都有自己的EventListener

---

---

var计数=20000；
对于（i=0；i

---

请不要介意其他事情，例如以编程方式创建20000个元素。我的问题是：让所有这些eventlistener都包含这些代码会有什么影响？只要没有触发，eventlistener中的代码是什么或有多少都很重要吗？

尝试使用事件委派，单个事件处理程序。看,

var计数=100；
对于（i=0；i

---

为如此多重复的事情创建事件处理程序感觉像是浪费CPU周期，加上管理如此多事件侦听器的内存

相反，最好使用事件冒泡/委派来侦听来自父节点的单击事件（理想情况是尽可能靠近祖先元素），并查看是什么元素触发了事件，并相应地调用相应的代码

这将是一个一次性绑定，如果操作正确，还应该捕获动态添加的元素

jQuery的示例也得到了很好的解释，包括

尽管实现这一点并不局限于jQuery

---

希望这能有所帮助。

现在还不清楚“影响”是什么意思。不过，有些JS框架使用单个顶级事件侦听器。可以为

.marker

创建单个

事件，使用
事件。target
检查
.marker
的哪个子元素是事件源，使用
if..else
处理要在单个任务中执行的任务handler@pvg我的意思是，如果有，它对绩效/资源有什么影响？他们中有多少人在页面上重要吗？会不会太多了？eventlistener中的代码是否增加了eventlistener的影响力？似乎有很多问题，但在我看来，这似乎是一个大问题。我想让你看看埃里克·利珀特的作品。永远记得问问自己是否在乎。@Amit谢谢你提供这篇文章，但是我需要大量的eventlisteners，我的例子没有被夸大太多。我真的，真的需要得到这个问题的答案。这太完美了。我想象
（'body'）。on（）
/如果动态添加更多的
.marker
-s，此代码也会工作？@Solo“如果动态添加更多的.marker-s，此代码也会工作？”是的
<!-- Final HTML of single .marker when it has been clicked -->
<div class="marker">
    <div class="remove"></div>
    <div class="change"></div>
    <div class="add"></div>
    <div class="drag"></div>
</div>

var count = 20 000;

for(i = 0; i < count; i++) {

    var marker = document.createElement('div');
    marker.className = 'marker';
    someParentElement.appendChild(marker);

    marker.click( function() {
        //Create child elements
        var remove = document.createElement('div');
        remove.className = 'remove';
        marker.appendChild(remove);

        var change = document.createElement('div');
        change.className = 'change';
        marker.appendChild(change);

        var add = document.createElement('div');
        add.className = 'add';
        marker.appendChild(add);

        var drag = document.createElement('div');
        drag.className = 'drag';
        marker.appendChild(drag);

        //Children eventlisteners
        remove.click( function() {
            //Do it's thing
        });
        change.click( function() {
            //Do it's thing
        });
        add.click( function() {
            //Do it's thing
        });
        drag.click( function() {
            //Do it's thing
        });
    });
}