Question

我有两个addEventListner方法。第一个调用函数activateItem（）（它在单击时在列表项上添加红色背景），第二个调用函数addItem（）（当我们单击按钮时添加一个列表元素）。

从调用addItem（）一次起，无法再调用activateItem（），我不明白为什么。

HTML code：

<!doctype html>
<head>
  <title>Javascript</title>
</head>
<body>
  <h1 id="title" > Clik a list item to replace this text.</h1>
  <button id=button>Add new item</button>
  <ul id=list>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
  </ul>

  <script src="main.js"></script>
</body>

JS代码：

var list = document.getElementsByTagName("li");
var title = document.getElementById("title");
var button = document.getElementById('button');
var unorderedList = document.getElementById('list');
var newItemCounter = 0;

for(i=0;i < list.length; i++){
  list[i].addEventListener("click", activateItem);
}

function activateItem(){
  title.innerHTML = this.innerHTML;
  this.style.backgroundColor = "red";
}

button.addEventListener("click", addItem);

function addItem(){
  newItemCounter++;
  unorderedList.innerHTML += "<li>New item " + newItemCounter +  "</li>";
}

Answer 1

检查以下代码中的评论

var list = document.getElementsByTagName("li");
var title = document.getElementById("title");
var button = document.getElementById('button');
var unorderedList = document.getElementById('list');
var newItemCounter = 0;

for(i=0;i < list.length; i++){
  list[i].addEventListener("click", activateItem);
}

function activateItem(){
  title.innerHTML = this.innerHTML;
  this.style.backgroundColor = "red";
}

button.addEventListener("click", addItem);

function addItem(){
  newItemCounter++;
  ///HERE's the modification, i suppose the innerHtml +=  was recreating the whole thing inside thus the listeners were lost
  var node = document.createElement("LI");                 
  var textnode = document.createTextNode("New item " + newItemCounter);         
  node.appendChild(textnode);                              
  unorderedList.appendChild(node); 
  node.addEventListener("click", activateItem);
}

<!doctype html>
<head>
  <title>Javascript</title>
</head>
<body>
  <h1 id="title" > Clik a list item to replace this text.</h1>
  <button id=button>Add new item</button>
  <ul id=list>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
  </ul>

  <script src="main.js"></script>
</body>

Answer 2

像这样更改您的代码。在list click

中发起addItem()事件

var list = document.getElementsByTagName("li");
var title = document.getElementById("title");
var button = document.getElementById('button');
var unorderedList = document.getElementById('list');
var newItemCounter = 0;

function activateItem() {
  this.style.backgroundColor = "red";
}
for (i = 0; i < list.length; i++) {
  list[i].addEventListener("click", activateItem);
}
button.addEventListener("click", addItem);

function addItem() {
  newItemCounter++;
  unorderedList.innerHTML += "<li>New item " + newItemCounter + "</li>";
  for (i = 0; i < list.length; i++) {
    list[i].addEventListener("click", activateItem);
  }
}

<!doctype html>

<head>
  <title>Javascript</title>
</head>

<body>
  <h1 id="title"> Clik a list item to replace this text.</h1>
  <button id=button>Add new item</button>
  <ul id=list>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
    <li>Fourth item</li>
    <li>Fifth item</li>
  </ul>

  <script src="main.js"></script>
</body>

两个addEventListener之间的冲突

2 个答案: