Dom使用JavaScript遍历Dom但事件未触及Html元素

Question

我想将删除功能添加到由Javascript动态创建的Li元素上的按钮上，但我似乎无法让事件侦听器点击目标按钮。

我试着马上添加它

    var trashButton = document.getElementsByClassName("deleteListItemButton");
    trashButton.addEventListener('click',removeLiItem);

但是我得到了一个未处理的异常错误

var idForLiElement =1;

document.getElementById("addTaskId").addEventListener('click', function(){

var valueFromTextBox = document.getElementById("textBoxId").value; 

if(valueFromTextBox) addItemToDo(valueFromTextBox);
});

function addItemToDo(valueFromTextBox){

var unorderedList = document.getElementById("toDoId")

var listElement =  document.createElement("li");
listElement.className ="listItem";
listElement.innerHTML = valueFromTextBox;
listElement.id =Number(idForLiElement);
idForLiElement ++;

//puts the newest list element before the last element
unorderedList.insertBefore(listElement, unorderedList.childNodes[0]);

//creates the  div that will contain both buttons in each list element
var buttonsContainer =  document.createElement("div");
buttonsContainer.className ="listItemButtonContainer";

//creates the delete button and assigns it a class name
var deleteButton =  document.createElement("Button")
deleteButton.className ="deleteListItemButton";

//creates the complete button and assigns it a class name
var completeButton =  document.createElement("Button")
completeButton.className ="completeListItemButton";

//creates the delete image tag and assigns it a class name
var trashImageTag =  document.createElement("i")
trashImageTag.className = "fa fa-trash fa-2x";

//creates the check mark button and assigns it a class name
var checkMarkImageTag =  document.createElement("i")
checkMarkImageTag.className= "fa fa-check fa-2x";

//appends delete image tag to delete button
deleteButton.appendChild(trashImageTag);

//appends check mark image tag to complete button
completeButton.appendChild(checkMarkImageTag);

//appends delete button to button container
buttonsContainer.appendChild(deleteButton);

//appends complete button to button container
buttonsContainer.appendChild(completeButton)

//appends button container to list element
listElement.appendChild(buttonsContainer);
};

var trashButton = document.getElementsByClassName("deleteListItemButton");

for (i = 0; i < trashButton.length; i++) {
trashButton[i].addEventListener('click',removeLiItem)
};

function removeLiItem(e){
console.log(this)
};

我只是希望事件监听器能够访问console.log，所以我知道按钮正在工作

Answer 1

将事件附加到刚刚创建的元素

deleteButton.addEventListener('click', function() { console.log('hit!') })

Answer 2

我想将删除功能添加到由javascript动态创建的Li元素上的按钮，但我似乎无法让事件监听器点击目标按钮。

元素是动态创建的，因此在创建元素时，添加事件侦听器的for循环已经执行。

这就是event propogation的用途。让父元素（ul）听取事件点击，而不是让每个孩子都承担责任。这样，添加多少个子元素无关紧要，momma（父元素）将始终监听点击。

你可以这样做：

// on your ul element
const itemList = document.querySelector(".item-list");

// listen for click on here
itemList.addEventListener('click', removeLiItem);

// you can access the actual element through the event's `target`
function removeLiItem (event) {
  if (event.target.classList.contains('deleteListItemButton') {
    // remove element
  }
}