將事件監聽器添加到多個元素

我想事件偵聽器頁面上添加到所有<select> S和我有這段代碼至今：

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     sels[i].addEventListener('change', alert('test!'), false); 
    } 
}

這僅當觸發頁面加載，而不是當警報我改變了我的任何<select>的值。

請問我可以向正確的方向輕推嗎？ :-)

來源

2012-12-17 Christian Lundahl

您需要爲有匿名函數，你立即調用在你的榜樣alert()功能：

... .addEventListener('change', function() { alert('test!')}, false ...

現在根據你的代碼addEventListener嘗試添加的undefined（回報alert()結果功能）。

或者，你可以通過該功能的處理程序：

function alertMe() { 
    alert('test!'); 
} 
... 

... .addEventListener('change', alertMe, false ...

注：通過使somefunction(arg[, arg...])叫你引用不工作，但到什麼函數返回。

來源

2012-12-17 14:09:14 antyrat

哦。我很積極，我嘗試過，但顯然不是。謝謝！編輯：我明白了。現在你提到它對我來說很有意義。 –

@Perplexor你確定嗎？我在代碼中看不到另一個錯誤。 – antyrat

當然，我在其他一些情況下嘗試過，這就是爲什麼當時沒有工作。但現在它適用於您的解決方案！ –

您立即執行警報（）函數，你需要傳遞的addEventListener功能的函數來代替，因此：在一個函數包裹alert，像前面提到的除了

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     document.getElementsByTagName('select')[i].addEventListener('change', function() { alert('test!'); }, false); 
    } 
}

來源

2012-12-17 14:10:55

，不使用getElementsByTagName爲循環的每一次迭代：

onload = function(e) { 
    sels = document.getElementsByTagName('select'); 
    for(i=0; i<sels.length; i++) { 
     sels[i].addEventListener('change', function(){alert('test!')}, false); 
    } 
}

你必須保存到一個變量select元素的列表，這是沒有必要的，更何況低效get所有這些元素，每個循環迭代。

來源

2012-12-17 14:17:29 Cerbrus

好點！我其實只是用「試錯」來得到我想要的結果。這就是我爲什麼那樣做的原因。謝謝！ –

沒問題，在我看來，「試驗和錯誤」是真正學會編程的唯一方法，這麼好的工作：P – Cerbrus

有用的答案，你知道更快的方法嗎？我的意思是getElementByTagName可能有點慢 – M98

我創建了以下簡單函數，它遍歷與selector匹配的所有元素，併爲event添加一個事件偵聽器和handler。

這是類似的功能jQuery的$(selector).on(event, handler)

function addEventListeners(selector, event, handler, useCapture){ 

    useCapture = useCapture || false; 

    Array.prototype.forEach.call(
     document.querySelectorAll(selector) 
     ,function(el, ix) { 
      el.addEventListener(event, handler, useCapture); 
     } 
    ); 
}

所以對於OP使用此功能會像這樣的方式：

addEventListeners("select", "change", function(evt){ console.log(evt); });

另見我的回答對Event listener for current and future elements

來源

2017-08-16 03:47:37 isapir

事件冒泡是JavaScript中的重要概念，因此如果您可以直接在DOM上添加事件，則可以保存一些代碼行：

document.addEventListener('change', function(e){ 
    if(e.target.tagName=="SELECT"){ 
    alert('SELECT CHANGED'); 
    } 
})

來源

2018-01-10 12:12:38

將事件監聽器添加到多個元素

回答

相關問題