javascript - 动态元素 onclick 函数

Question

我想知道在以下结构上为动态创建的 HTML 元素添加事件监听器的最短和最快的方法是什么，只允许纯 JS。这是 HTML 结构:

<div class="container">
  <h1> To Do List </h1>
  <input type="text" id="userInput" />
  <ul id="todosHolder">
    <li><span class="delete">X</span> Foo </li>
    <li><span class="delete">X</span> Whatever </li>
    <li><span class="delete">X</span> Yeah sure </li>
    <li><span class="delete">X</span> Bar </li>
  </ul>
</div>

这是JS结构

// Check && uncheck todos by clicking

let li = document.querySelectorAll('li');

for( let i = 0; i < li.length; i++ ) {
  li[i].addEventListener('click', function() {
    this.classList.toggle('completed');
  });
}

//Click "X" to delete a todo
let x = document.querySelectorAll('.delete');
for( let i = 0; i < x.length; i++ ) {
  x[i].addEventListener('click', function(){
      this.parentElement.remove();
  });
}

// listen for 'enter' keypress
let inputListener = document.getElementById('userInput');
inputListener.addEventListener('keypress',function(event) {
    if(event.which === 13) {
        var inputText = this.value;
        this.value = "";
        //create new li and add it to ul
        var ul = document.getElementById('todosHolder');
        ul.insertAdjacentHTML('beforeend','<li><span class="delete">X</span> ' + inputText + '</li>');
    }
});

Answer 1

您可以在父级上放置一个监听器来处理子级的事件。

//put an event listener on the parent ul
document.getElementById('todosHolder').addEventListener('click', function(e){
  //if the delete was clicked, remove the li
  if (e.target.classList.contains('delete')) {
    e.target.parentElement.remove();
  } else if (e.target.tagName === 'LI') {
    //if the li was clicked, toggle the class
    e.target.classList.toggle('completed');
  }
});

// listen for 'enter' keypress
let inputListener = document.getElementById('userInput');

inputListener.addEventListener('keypress', function(event) {
  if (event.which === 13) {
    var inputText = this.value;
    this.value = "";
    //create new li and add it to ul
    var ul = document.getElementById('todosHolder');
    ul.insertAdjacentHTML('beforeend', '<li><span class="delete">X</span> ' + inputText + '</li>');
  }
});

.completed { color: red; }

<div class="container">
  <h1> To Do List </h1>
  <input type="text" id="userInput" />
  <ul id="todosHolder">
    <li><span class="delete">X</span> Foo </li>
    <li><span class="delete">X</span> Whatever </li>
    <li><span class="delete">X</span> Yeah sure </li>
    <li><span class="delete">X</span> Bar </li>
  </ul>
</div>