javascript - 減少重複性點擊事件

Question

我剛剛進入我的JavaScript（模式，名稱空間，對象等），並試圖在我的最新項目中實踐其中的一些。

我有一個簡單的形式，我打算顯示/隱藏基於被選中的複選框的東西。 HTML不能改變（長篇故事），所以我只關注JavaScript問題，即當有多個ID時，如何很好地減少重複性？

腳本（這我肯定可以濃縮）下面是：

var prereg = { 

    hideItems: (function() { 
     document.getElementById('companyName-element').style.display = 'none'; 
     document.getElementById('companyName-label').style.display = 'none'; 
    })(), 

    showItems: function() { 
     var checkbox = document.getElementById('businessCustomer'); 
     if(checkbox.checked) { 
      document.getElementById('companyName-element').style.display = 'block'; 
      document.getElementById('companyName-label').style.display = 'block'; 
     } else { 
      document.getElementById('companyName-element').style.display = 'none'; 
      document.getElementById('companyName-label').style.display = 'none'; 
     } 
    }, 

    addEvent: function (el, ev, fn) { 
     if (el.addEventListener) { 
      el.addEventListener(ev, fn, false); 
     } else if (el.attachEvent) { 
      el.attachEvent('on' + ev, fn); 
     } else { 
      el['on' + ev] = fn; 
     } 
    } 

} 

prereg.addEvent(document.getElementById('businessCustomer-label'), 'click', prereg.showItems); 
prereg.addEvent(document.getElementById('businessCustomer-element'), 'click', prereg.showItems); 

Answer 1

我認爲你正在尋找的事件代表團，這是使用單一的處理程序的所有事件說的一種假想方式相同的型號。那麼，即使是不同的類型也是一種選擇。但只是一個例子：

假設你的HTML看起來像這樣：

<form id="formId"><input type="checkbox" id="foo"/> 
    <input type="checkbox" id="bar"/> 

以此類推（不能被人打擾）。你的JS可以處理1個事件偵聽器和處理所有點擊事件：

var form = document.getElementById('formId'); 
if (form.addEventListener) 
{ 
    form.addEventListener('click',clickDelegator,false); 
} 
else 
{ 
    form.attachEvent('onclick',clickDelegator); 
} 
function clickDelegator(e) 
{ 
    e = e || window.event; 
    var target = e.target || e.srcElement;//target holds reference to clicked element 
    if (target.tagName.toLowerCase() !== 'input') 
    { 
     //not interested in this, just let the event pass 
     return e;// or return true; or return;... doesn't matter 
    } 
    switch(target.type.toLowerCase())//target is an input field, we've established that 
    { 
     case 'checkbox': 
      //code for checkboxes; 
      //target is a checkbox, use target.checked, target.id, as normal 
     break; 
     case 'button': 
      //deal with buttons here 
     break; 
     //etc... 
    } 
} 

如果你想1 委託功能來處理所有的事件，你可以，但你得switch...case所有e.type的當然，這通常會導致無用的，不可維護的怪物功能。但只是你知道：它可能是是。

需要關閉嗎？當然，沒問題：

form.addEventListener('click',(function(someVar) 
{ 
    return function(e) 
    { 
     e = e || window.event; 
     clickDelegator.apply(this,[e,someVar]); 
     //pass as argument, the clickDelegator was declared outside closure scope 
     //and doesn't have access to someVar, but this way, it has the closure var 
     //as an argument 
    } 
})(theClosureVar),false); 

谷歌事件代表團的一些更多的例子，你會不會後悔......這是那是非常被低估的，而不是作爲衆所周知的，因爲他們應該的JavaScript的功能之一。我希望我能給你一個更好的例子 - 關閉 - 轉發器組合，因爲這是一個非常強大的例子。以移動設備爲例：沒有點擊事件，只有觸發事件和觸發事件。因此，您將touchstart處理程序設置爲綁定touchend偵聽器，並通過閉包向touchend事件的處理程序添加超時id。如果一段時間過去了，用戶可能不會點擊該元素，而是使用他/她手機的其他觸摸功能，因此您可以分離聽衆。

我不擅長解釋這個，但看看自定義的tab事件如何工作的一些例子，它通常歸結爲類似於我的運球在這裏，現在我要睡覺...祝你好運

Answer 2

沒有太多的重構你的代碼，你只是想緩存你想操縱的對象在一個數組中，並在循環中處理它們。

var prereg = (function() { 

    // add your style elements to this array. We only call getElementId once 
    // and not on each function call. 
    var styleObjects = [ 
      document.getElementById('companyName-element'), 
      document.getElementById('companyName-label') 
     ], 

     checkbox = document.getElementById('businessCustomer'), 

     i; 

    // Function applies display style to all elements in styleObjects array 
    function applyStyle(display) { 
     var i; 
     for (i = 0; i < styleObjects.length; i += 1) { 
      styleObjects[i].style.display = display; 
     } 
    } 

    function hideItems() { 
     applyStyle('none'); 
    } 

    function showItems() {    
     if(checkbox.checked) { 
      applyStyle('block'); 
     } else { 
      applyStyle('none'); 
     } 
    } 

    function addEvent(el, ev, fn) { 
     if (el.addEventListener) { 
     el.addEventListener(ev, fn, false); 
     } else if (el.attachEvent) { 
     el.attachEvent('on' + ev, fn); 
     } else { 
     el['on' + ev] = fn; 
     } 
    }  

    // Attach event handler to all objects in styleObjects array 
    for (i = 0; i < styleObjects.length; i += 1) { 
     addEvent(styleObjects[i], 'click', showItems); 
    } 

    return { 
     hideItems: hideItems, 
     showItems: showItems, 
     addEvent: addEvent 
    }; 
}()); 

，如果你想這個多次做這將是微不足道的修改此接受複選框和元素的數組風格作爲參數。