javascript - 编辑textContent或innerHTML会杀死eventListener

Question

我是从js开始的，所以请原谅我明显的错误。我正在尝试重新创建选择输入，其中几乎没有可样式标记的选项。

简要说明我正在尝试做的事情:

1. 隐藏选择
2. 使用第一个选项的文本创建一个父 div，并将其附加到后面，而不是原来的隐藏选择。
3. 在点击时添加事件监听器以切换类(它显示和隐藏子元素)
4. 使用原始隐藏选择中的选项值和文本创建内部 div。
5. 为每个元素添加事件监听器以替换 select 的值。

这几行 js 和几行 css 让我可以轻松选择样式。

// Define select and options
var select = document.getElementById('select');
var children = select.children;

// Recreate select via divs and keep same class
select.style.display = 'none';
var selectNew = document.createElement('div');
selectNew.className = select.classList;
selectNew.textContent = select.children[0].text;
select.parentNode.insertBefore(selectNew, select);
selectNew.addEventListener('click', function() {
  toggleChildren();
});

function toggleChildren() {
  selectNew.classList.toggle('active');
}

// remap children
var childArray = [];
for (var i = 0; i < children.length; i++) {
  var child = document.createElement('div');
  child.innerHTML = select.children[i].text;
  child.dataset.value = select.children[i].value;
  selectNew.appendChild(child);
  childArray.push(child);

  child.addEventListener("click", function () {
    selectChoice();
  });
}

function selectChoice() {
  var which = childArray.indexOf( event.target || event.srcElement);
  select.value = children[which].value;
  // selectNew.textContent = children[which].text;
}

.select {
  position: relative;
  width: 100%;
  line-height: 3em;
  background: #eee;
}
.select > div {
  position: absolute;
  display: none;
  width: 100%;
}
.select > div:nth-child(1) {
  top: 2em;
}
.select > div:nth-child(2) {
  top: 4em;
}
.select > div:nth-child(3) {
  top: 6em;
}
.select > div:nth-child(4) {
  top: 8em;
}
.select > div:nth-child(5) {
  top: 10em;
}
.select > div:hover {
  background: #eee;
}
.select.active > div {
  display: block;
}

<select name="sortby" id="select" class="select">
  <option value="val1">Value 1</option>
  <option value="val2">Value 2</option>
  <option value="val3">Value 3</option>
  <option value="val4">Value 4</option>
  <option value="val5">Value 5</option>
</select>

每当我尝试更新父元素内的文本以通过以下方式显示所选选项的文本时:

selectNew.textContent = children[which].text;

它会杀死之前为此元素添加的事件监听器。有人可以帮助我理解我做错了什么吗？我在 eventListeners 的行为中缺少什么吗？

Answer 1

您引用的行确实会导致问题，但并不是因为它杀死了监听器。它实际上用文本替换了 selectNew 的全部内容。 您想要的是替换第一个子节点的文本，即 textContent 节点。

如果您将该行更改为:

selectNew.firstChild.textContent = children[which].text;

然后一切都会按预期进行。

JSFiddle here .

回答有奖励 关于添加监听器来更改事件的附加问题: 您不能仅在 div 上使用“change”事件的监听器，只能在输入等表单元素上使用。

但是，您可以检测点击处理程序内的更改，如下所示:

function selectChoice() {
    var which = childArray.indexOf(event.target || event.srcElement);
    select.value = children[which].value;
    if (selectNew.firstChild.textContent != children[which].text) {
        alert('select value has been changed');
        selectNew.firstChild.textContent = children[which].text;
    }
}

已更新fiddle here