[英]Dynamic elements onclick functions
我想知道在以下結構上為動態創建的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>');
}
});
您可以在父級上放置一個偵聽器以處理子級的事件。
//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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.