Question

我正在使用一个可以点击很多的程序做一些工作，但是只要点击他们的父母点击并且处于活动状态时，就需要点击某些东西。现在我有三种方法可以解决这个问题。

许多活动处理程序
不断创造并摧毁他们
拥有一个顶级处理程序并阅读事件，了解甚至发生在哪个孩子（event.target）

三个对我来说不是最明显的选择的原因是我点击的孩子event.target和object.parentNode需要反复运行以查看实际可用于点击的元素;我听说DOM api很贵。

我很想知道每种方法相对于彼此的价格是多么昂贵，以及在类似的方法中接受的做法是多少。监听器的数量在数百个范围内，它是一个具有适度DOM突变的动态应用程序。

编辑：为了澄清这个问题，关于DIV并将事件处理程序附加到它们。

Answer 1

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

如果您不使用按钮，则可以添加或删除名为disabled的类。单击该元素时，侦听器可以检查其类，如果它具有“禁用”类，则不执行任何操作。否则，让它做它做的事情。

类的添加和删除也可用于修改元素的外观，使其看起来处于禁用状态（类似于按钮和输入在禁用时更改外观的方式）。

简单有/ 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。

您还可以独立维护元素的状态，因此当单击元素时，它会根据状态知道如何处理子元素或父元素（或其他任何元素）。

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

1 个答案: