事件偵聽器添加到文檔中對元素存在檢查，然後添加事件偵聽器

我一直在尋找這一點，但我還沒有找到答案。我想知道在Javascript中哪一種更好的做法。要添加一個事件監聽目標是否爲所希望的一個，將只工作：事件偵聽器添加到文檔中對元素存在檢查，然後添加事件偵聽器

document.addEventListener('click', function(e){ 
    if(e.target && e.target.classList.contains('foo')){ 

    } 
});

或創建一個變量指的是期望的元件和如果存在的話添加的事件偵聽

var a = document.querySelector('.foo'); 

if (a) { 
    a.addEventListener('click', function(){ 

    }) 
}

感謝你的時間！！

2015-04-03 Merqurio

第二個不會影響調用querySelector後添加的元素。 – 2015-04-03 20:06:28

這取決於你想要什麼/需要做什麼，兩種方式都有利弊。由於目前常見的瀏覽器速度更快，因此對代表團的後期過濾不會像以前那樣對性能造成影響，所以現在看到越來越多的第一種模式。 – dandavis 2015-04-03 20:38:33

謝謝@dandavis！ – Merqurio 2015-04-03 20:46:17

我總是選擇第一個aproach，因爲它也影響動態創建的元素。我也認爲你不需要條件的第一部分。我的代碼如下所示：

document.addEventListener('click', function(e){ 
    if(e.target.id == "confirm-button"){ 
    // do something 
    } 
});

2016-07-25 16:39:25

回答