11

我已经为此苦苦挣扎了好几个小时了。

我想为<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 中的值时触发警报。

请问我可以朝正确的方向轻推吗？:-)

4

6 回答 6

9

alert()当您在示例中立即调用函数时，您需要有匿名函数：

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

现在根据您的代码addEventListener尝试添加undefined（alert()函数返回）的结果。

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

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

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

注意：通过somefunction(arg[, arg...])调用你引用的不是函数，而是函数返回的内容。

于 2012-12-17T14:09:14.473 回答
6

除了将 包装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所有这些元素效率低下，每次循环迭代。

于 2012-12-17T14:17:29.433 回答
1

我创建了以下简单函数，它遍历所有与 匹配的元素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); });

另请参阅我对当前和未来元素的事件侦听器的回答

于 2017-08-16T03:47:37.000 回答
0

您正在立即执行 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);
    }
}
于 2012-12-17T14:10:55.413 回答
0

事件冒泡是 javascript 中的重要概念，所以如果你可以直接在 DOM 上添加事件，你可以节省几行代码：

document.addEventListener('change', function(e){
  if(e.target.tagName=="SELECT"){
   alert('SELECT CHANGED');
  }
})
于 2018-01-10T12:12:38.863 回答
0

我总是推荐委托 - 如果输入在同一个容器中，那么你可以这样做

window.addEventListener("load", function() { // on page load
  document  // or a closer static container
    .addEventListener("input", function(e) { // input or change
    const tgt = e.target;
    if (tgt.tagName === "SELECT") {
      const id = tgt.id;
      console.log("You changed", id)
    }
  });
});
<div id="inputContainer">
  <h1>Change the select</h1>
  <select id="sel1">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
  <select id="sel2">
    <option value="">Please select</option>
    <option value="1">One</option>
    <option value="2">Two</option>
  </select>
</div>

于 2021-08-30T13:24:41.363 回答