javascript - 事件监听器的影响？

Question

eventlisteres 有什么影响？我说的是大数字，这里有一个例子:

• 一开始只有x个.marker
• 当点击 .marker 时，通过 JS 添加所有 child - 事件监听器
• 每个 child 做自己的事情，这意味着他们每个人都有自己的事件监听器

---

<!-- 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
        });
    });
}

请不要介意其他事情，例如以编程方式创建 20 000 个元素。我的问题是:让所有这些事件监听器中包含所有这些代码会产生什么影响？只要事件监听器没有被触发，事件监听器中的代码是什么或有多少并不重要？

Answer 1

尝试使用事件委托(delegate)，单一事件处理器。参见 switch , .is()

var count = 100;

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

  var marker = document.createElement('div');
  marker.className = 'marker';
  marker.innerHTML = marker.className + " " + i;
  document.body.appendChild(marker);

  //Create child elements
  var remove = document.createElement('div');
  remove.className = 'remove';
  remove.innerHTML = "remove" + i;
  marker.appendChild(remove);

  var change = document.createElement('div');
  change.className = 'change';
  change.innerHTML = "change" + i;
  marker.appendChild(change);

  var add = document.createElement('div');
  add.className = 'add';
  add.innerHTML = "add" + i;
  marker.appendChild(add);

  var drag = document.createElement('div');
  drag.className = 'drag';
  drag.innerHTML = "drag" + i;
  marker.appendChild(drag);
  //Create child elements
}

var check = function(args) {
  alert(args.innerHTML.replace(/[^\d+]/g, ""))
}

var obj = {
  remove: check,
  change: check,
  add: check,
  drag: check
}

var message = function(name) {
  console.log(name)
}

$("body").on("click", ".marker", function(event) {
  var name = event.target.className;
  switch (name) {
    case "remove":
      /* do stuff */
      message(name);
      break;
    case "change":
      /* do stuff */
      message(name);
      break;
    case "add":
      /* do stuff */
      message(name);
      break;
    case "drag":
      /* do stuff */
      message(name);
      break;
    default:
      /* do stuff */
      alert(name);
      break;
  }

  // utilizing `.is()`
  if ($(event.target).is(".remove")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".change")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".add")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if ($(event.target).is(".drag")) {
    // do stuff
    event.target.innerHTML += "clicked"
  }
  if (!$(event.target).is(".marker")) {
    // utilizing an object
    obj[event.target.className](event.target)
  }

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>