如何在javascript中使用委托

Question

我尝试使用 javascript 制作待办事项列表应用程序，我具有创建新的每个项目（li 元素）的功能

  todoView: function (todo) {
    var controller =  todoController.todoList;
    console.log('controller', controller);

    var item = document.createElement('li');
    item.setAttribute('class', 'todoItem');

    var inpCheckbox = document.createElement('input');
    this.setAttributes(inpCheckbox, { 'type': 'checkbox', 'class' : 'itemList'} );

    var lbContent = document.createElement('label');
    lbContent.innerHTML = todo.getContent();

    var btnRemove = document.createElement('button');
    console.log('id', this.id)
    this.setAttributes(btnRemove, { 'class': 'remove', 'id' : this.id} );
    // btnRemove.setAttribute('id', this.id);

    //item append each element
    item.appendChild(inpCheckbox);
    item.appendChild(lbContent);
    item.appendChild(btnRemove);

    console.log('item', item);

    //ul append each item
    document.querySelector('#todoListView').appendChild(item);
  },

但在最后的文件中，我为所有 li 项的句柄事件设置了类 .remove

var deleteItem = document.getElementsByClassName('remove')
for(var i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener("click", function() {
    todoController.removeTodo(i);
  });
}

但现在我遇到了无法调用.remove 类的问题，因为它只是创建到todoView 函数中。它是包含差异块。在 jquery 中我可以使用委托来解决它，但我不知道如何在 js 对中修复它。请帮助我

Answer 1

代替

var deleteItem = document.getElementsByClassName('remove')
for(var i = 0; i < deleteItem.length; i++) {
  deleteItem[i].addEventListener("click", function() {
    todoController.removeTodo(i);
  });
}

你会想要的

todoListView.addEventListener('click', function(e) {
   if(e.target.classList.contains('remove')){
     todoController.removeTodo(e.target);
   } 
});

但是，我认为您的 removeTodo 函数存在缺陷