addEventListener、“更改”和选项选择答案

【问题标题】：addEventListener, "change" and option selectionaddEventListener、“更改”和选项选择
【发布时间】：2014-09-12 13:36:59
【问题描述】：

我正在尝试让动态选择列表自行填充，从单个选择开始：

<select id="activitySelector">
      <option value="addNew">Add New Item</option>
</select>

然后是我们的 JavaScript 代码：

addEventListener("select", addActivityItem, false);

问题是当你有一个项目时各种事件不会触发：不是“改变”，因为当你选择那个项目时文本没有什么不同；不是“选择”（就像我在这里所说的那样），原因大致相似，因为我并没有真正选择任何东西，因为只有一个项目。这里应该触发什么事件？在我的选项列表中列出一个空白项来触发事件似乎很愚蠢，所以我希望有另一种解决方案。或者这是最好的解决方案？

【问题讨论】：

似乎您希望它触发一个单独的 onclick 处理程序来检查项目的数量，如果只有一个，则调用 addActivityItem。
我想我只是想弄清楚当我单击其中只有一个项目的选择项目时会触发什么事件（如果有的话），因为现在应该触发的事件不要。
如果你点击，点击事件会被触发。如果要触发选择事件，可以显式触发 document.getElementById('activitySelector').click()

标签： javascript dom-events

【解决方案1】：

如果存在少于 2 个选项，您需要一个调用 addActivityItem 的点击监听器：

var activities = document.getElementById("activitySelector");

activities.addEventListener("click", function() {
    var options = activities.querySelectorAll("option");
    var count = options.length;
    if(typeof(count) === "undefined" || count < 2)
    {
        addActivityItem();
    }
});

activities.addEventListener("change", function() {
    if(activities.value == "addNew")
    {
        addActivityItem();
    }
});

function addActivityItem() {
    // ... Code to add item here
}

现场演示是here on JSfiddle。

【讨论】：

我意识到错误在我的代码中的其他地方，而点击事件毕竟是我想要的。这就是我所做的，也是我的想法，所以确认是好的。谢谢！
在您的示例链接中，写了changed 事件，我认为应该是change

【解决方案2】：

问题是您使用了 select 选项，这是您出错的地方。 Select 表示文本框或 textArea 具有焦点。你需要做的是使用change。 “在选择元素中做出新选择时触发”，也可以在远离文本框或文本区域时像模糊一样使用。

function start(){
      document.getElementById("activitySelector").addEventListener("change", addActivityItem, false);
      }

function addActivityItem(){
      //option is selected
      alert("yeah");
}

window.addEventListener("load", start, false);

【讨论】：

谢谢，当我将 () 添加到事件侦听器中的函数调用时，这对我有用，如 "...addEventListener("change", addActivityItem(), false);"跨度>