javascript - 循环事件监听器与许多监听器

Question

我正在使用一个程序做一些工作，该程序有很多要单击的内容，但是只有在说他们的父项已被单击并且处于事件状态时才需要单击某些内容。现在，我认为可以通过三种方式来解决这个问题。

1. 许多事件处理程序
2. 不断地创造和摧毁它们
3. 有一个顶级处理程序并读取事件以了解 child 甚至在 (event.target) 上发生了什么

三个对我来说不是最明显的选择的原因是我点击的 child 将是 event.target 和 object.parentNode 需要重复运行到查看实际上可以单击的元素；我听说 DOM api 很贵。

我很想知道每种方法相对于彼此的成本有多高，以及在类似的事情中什么是公认的做法。监听器数量在数百个范围内，它是一个具有适度 DOM 变化的动态应用程序。

编辑:为了澄清这个问题是关于 DIV 和附加事件处理程序的。

Answer 1

如果您使用按钮或类似的东西，您可以启用和禁用它们。它们通常也有不同的外观，因此用户可以知道不要点击禁用的按钮。

如果您不使用按钮，您可以添加或删除一个名为 disabled 的类。单击该元素时，监听器可以检查它的类，如果它有一个“禁用”类，则让它什么都不做。否则，让它做它做的事。

类的添加和删除也可用于修改元素的外观，使其看起来被禁用(类似于按钮和输入在禁用时如何改变外观)。

简单的 has/add/removeClass 函数:

var util = {dom:{}};

util.trim = function(s) {
  return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' ');
}

util.dom.hasClassName = function(el, cName) {
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)');
    return el && re.test(el.className);
}

util.dom.addClassName = function(el, cName) {
    if (!util.dom.hasClassName(el, cName)) {
        el.className = util.trim(el.className + ' ' + cName);
    }
}

util.dom.removeClassName = function(el, cName) {
    if (util.dom.hasClassName(el, cName)) {
        var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g');
        el.className = util.trim(el.className.replace(re, ''));
    }
}

一个简单的例子:

<script>

function toggle(id) {
  var el = document.getElementById(id);

  if (!el) return;

  if (util.dom.hasClassName(el, 'disabled')) {
    util.dom.removeClassName(el, 'disabled')
  } else {
    util.dom.addClassName(el, 'disabled')
  }
}

function doStuff(el) {
  if (util.dom.hasClassName(el, 'disabled')) return;
  alert('I\'m alive!');
}

</script>

<button id="b0" onclick="doStuff(this);">button 0</button>
<button onclick="toggle('b0')">change b0</button>

或者，disabled 属性可以设置为 true 或 false。

您还可以独立于元素维护状态，因此当点击一个元素时，它会根据其子元素或父元素(或其他)的状态知道要做什么。