Eventlisteners impact?

Question

What impact does eventlisteres have? Im talking about big numbers, here's an example:

• There's only x amount of .marker at first
• All children are added via JS when .marker is clicked - eventlistener
• Each child does it's own thing which means each of them have their own eventlisteners

---

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

Please don't mind other things, e.g creating 20 000 elements programmatically. My question is this: what would be the impact of having all these eventlisteners with all this code in them? Does it even matter what or how much code is inside eventlistener as long as it hasn't been triggered?

Answer 1

Try using event delegation , single event handler. See 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>