Question

我已经在这几个小时内苦苦挣扎了。

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

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所有这些元素的低效率，每次循环迭代。

Answer 3

我创建了以下简单函数，该函数遍历与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

的回答

Answer 4

您正在立即执行alert（）函数，您需要将addEventListener函数传递给函数，所以：

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

Answer 5

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

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

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

5 个答案: