自行車事件監聽器vs很多聽衆

Question

我正在做一些有很多點擊的程序，但是有些事情只要點擊他們的父母被點擊並且處於活動狀態就需要點擊。現在有三種方法可以解決這個問題。

1. 許多事件處理程序
2. 不斷創建和銷燬它們
3. 有一個頂層的處理程序和讀什麼孩子甚至上（event.target）

的原因三事件發生對我來說不是最明顯的選擇是我點擊的孩子將是event.target和object.parentNode需要重複運行以查看實際上可用於點擊的元素;我聽說DOM API很貴。

我很想知道每個方法有多貴是相對於彼此，什麼是公認的做法在類似的東西。監聽器的數量在數百個範圍內，這是一個具有適度DOM變化的動態應用程序。

編輯：爲了澄清這個問題是關於DIV和附加事件處理程序給他們。

Answer 1

如果您正在使用按鈕或類似按鈕，您可以啓用和禁用它們。他們通常也有不同的外觀，所以用戶可以知道不要點擊禁用的按鈕。

如果您不使用按鈕，您可以添加或刪除一個名爲disabled的類。當單擊該元素時，監聽器可以檢查它的類，如果它有一個「禁用」類，請不要執行任何操作。否則，它做它做的事情。

的添加和去除的類也可以用來修改元件的外觀，使得它看起來禁用（類似於禁用時按鈕和輸入如何改變外觀）。

簡單有/添加/ 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> 

可選地禁用屬性可以被設置爲真或假。

您也可以保持狀態independantly的元素，所以當被點擊的元素它知道要基於狀態如果孩子或父母元素（或其他）什麼。