Я создаю приложение для дел, которое является интенсивным приложением CRUD. HTML для пользовательских задач выглядит примерно так:
<ul class="tasks-wrapper">
<li class="task-item" data-id=1>Task_1</li>
<li class="task-item" data-id=2>Task_2</li>
</ul>
По сути, щелчок по любому элементу li означает, что пользователь хочет обновить содержимое задачи, li элемент. Один из способов реализовать эту функциональность - выполнить следующее:
all_tasks = document.querySelectorAll('li.task-item');
all_tasks.forEach((task) => {
task.onclick = fire_callback_function_to_update_content_of_selected_task;
});
Приведенный выше код работает нормально, но я не могу определить, является ли он дружественным к производительности или нет. У меня вопрос: когда выполняется l oop? выполняется ли он каждый раз, когда dom запускает событие на странице или только когда он запускает событие в оболочке задач?
В настоящее время я изменил свою реализацию, используя делегирование событий в моем элементе оболочки задач, который дает лучшую производительность, но, тем не менее, я хочу понять производительность предыдущего решения и подумать, есть ли у кого-нибудь более эффективная реализация.
tasks = document.querySelector('ul.tasks-wrapper');
tasks .addEventListener('click', respondToTheClick);
function respondToTheClick (event){
If (event.target && event.target.match('li.task-item')){
// callfunction to update content of selected task using its id which you can get using
event.target.id
}
}