javascript - 选择元素未附加 addEventListener

Question

我正在尝试创建一个选择元素并向其添加一个“输入”事件。使用 JavaScript 的所有内容如下所示:

function showSelectedOption(str) {
  alert(str);
}

var list = document.createElement("select");
list.id = "listId";
list.addEventListener('input', showSelectedOption(this.selectedIndex));

for (var i = 0; i < 3; i++) {
  var option = document.createElement("option");
  option.value = "none";
  option.text = "text";
  list.appendChild(option);
}

document.body.appendChild(list);

但是，当我检查元素时，未附加输入事件。

我该如何解决这个问题？

Answer 1

几个问题。

您没有绑定(bind) showSelectedOption 函数，而是调用它并将其返回值(未定义)用作事件处理程序.

所以传递showSelectedOption而不调用它。

然后您必须在方法中找到该元素的 selectedIndex，方法是使用 input 时传递给函数的 event事件被触发。

function showSelectedOption(event) {
  var element = event.target,
      index = element.selectedIndex,
      value = element.options[index].value;

  alert(value);
}

var list = document.createElement("select");

list.id = "listId";
list.addEventListener('input', showSelectedOption);

for (var i = 0; i < 3; i++) {
  var option = document.createElement("option");
  
  option.value = "none";
  option.text = "text";
  list.appendChild(option);
}

document.body.appendChild(list);