javascript - 编辑 textContent 或 innerHTML 会杀死 eventListener

Question

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

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

1. 隐藏选择
2. 使用第一个选项的文本创建一个父 div，并将其附加到原来的隐藏选择中。
3. 在单击时添加 eventListener 以切换类(它显示和隐藏子元素)
4. 使用来自原始隐藏选择的选项的值和文本创建内部 div。
5. 为它们中的每一个添加 eventListener 以替换 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 上的“更改”事件使用监听器，只能对输入等表单元素使用监听器。

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

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