将事件侦听器添加到多个元素

Question

我现在已经好几个小时了.

我想<select>在页面上为所有s 添加一个事件监听器,到目前为止我已经得到了这段代码:

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

这只会在加载页面时触发警报,而不是在我更改任何<select>s中的值时触发警报.

我可以在正确的方向上轻推吗？:-)

Answer 1

alert()在您的示例中立即调用函数时,您需要具有匿名函数:

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

现在根据你的代码addEventListener尝试添加undefined(返回alert()函数)的结果.

或者您可以为此传递函数处理程序:

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

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

注意:通过somefunction(arg[, arg...])调用你引用不是函数,而是返回什么函数.

Answer 2

除了包装alert函数之外,如前所述,不要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所有这些元素,每个循环迭代都是低效的.