兩個addEventListener衝突

我有兩個addEventListner方法。第一個調用函數activateItem（）（它在點擊時在列表項上添加一個紅色背景），第二個調用函數addItem（）（當我們點擊按鈕時它添加一個列表元素）。兩個addEventListener衝突

從addItem（）被調用一次，activateItem（）不能再被調用，我不明白爲什麼。

HTML代碼：

<!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>"; 
}

來源

2017-05-18 Hugues

擺脫'innerHTML'的，使用適當的DOM操作方法。 – Teemu

當您覆蓋'unorderedList.innerHTML'時，它將用沒有事件的新元素替換所有內容。避免使用'.innerHTML'。這是瑣碎的做事方式。 – JLRishe

更改代碼這樣。啓動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>

來源

2017-05-18 10:03:27 prasanth

內檢查註釋下面的代碼中

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>

來源

2017-05-18 10:03:41 jackstrapp

兩個addEventListener衝突

回答

相關問題