Question

eventlisteres有什么影响？我在谈论大数字，这是一个例子：

首先只有 x 的.marker金额
点击JS时，所有子项都会通过.marker添加 - eventlistener
每个孩子都做自己的事情，这意味着他们每个人都有自己的事件恶习者

<!-- 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个元素。我的问题是这样的：让所有这些eventlistener包含所有这些代码会产生什么影响？只要事件没有被触发，它在eventlistener中的代码是什么或多少都是重要的？

Answer 1

尝试使用事件委派，单个事件处理程序。请参阅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>

Answer 2

为许多重复的事情创建事件处理程序感觉就像浪费CPU周期一样，加上内存来管理这么多事件监听器。

相反，最好使用事件冒泡/委托来监听来自父节点的click事件（因为尽可能接近祖先元素是理想的）并查看触发事件的元素并相应地调用相应的代码

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

jQuery的例子也很好地解释了以下

https://learn.jquery.com/events/event-delegation/ http://api.jquery.com/on/

虽然你不仅限于jQuery来实现它。

希望有所帮助。

Eventlisteners影响？

2 个答案: