编辑textContent或innerHTML会终止eventListener

Editing the textContent or innerHTML kills eventListener

本文关键字：终止 eventListener innerHTML textContent 编辑      更新时间：2023-09-26

我从js开始，所以请原谅我明显的错误。我正在尝试用一些选项来重新创建可样式化标记的选择输入。

简单地说，我正在尝试做什么：

  1. 隐藏选择
  2. 用第一个选项的文本创建一个父div，并附加它，而不是原来的隐藏select
  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;

它会终止先前为此元素添加的事件侦听器。有人能帮我理解我做错了什么吗？我在事件听众的行为中缺少了什么？

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

如果您将线路更改为：

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

那么一切都如预期的那样。

JSFiddle在这里。

回答奖金关于添加监听器以更改事件的附加问题：不能只在div上使用"change"事件的侦听器，只能在input等表单元素上使用。

然而，您可以检测到点击处理程序中的更改，如下所示：

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

它不会杀死你的事件，你通过设置textContent来删除你的选项元素，这样当你点击div时就没有什么可显示的了。你需要设置div的第一个TextNode的textContent。

// 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(e) {
  toggleChildren(e);
});
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;
  //get the first textnode and set its textContent
  selectNew.childNodes[0].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>

相关文章：