Как из обработчика события ondblclick вынести события blur и keydown?

Написала тудулист, в котором можно редактировать задачу по двойному клику. Всё хорошо, но преподаватель сказал, что нужно вынести из обработчика события "ondblclick" функцию "blur" (которая происходит при завершении редактирования задачи) и функцию "keydown"(которая также завершает редактирование задачи по нажатию на клавиши на клавиатуре). Написал, что можно повесить обработчик события на элемент, на который кликнули, но почему-то этот способ не работает. Помогите пожалуйста вынести всё из одной функции.

разметка

<li ondblclick = "editTask(${index})" class = "todo-item ${task.completed ? 'checked' : ''}">
        <label class="isDone"><input onclick = "completeTask(${index})" type="checkbox" name=" "class="checkboxDone" ${task.completed ? 'checked' : ''}/><span class = "spanCompleted ${task.completed ? 'completed' : ''}"></span></label>
        ${task.description}
        <button onclick = "deleteTask(${index})" class="deleteDuty"><img src="icons/x.svg" alt="" class=""></button>
</li>

полная функция (в массив tasks добавляются задачи, а потом из tasks добавляются в localstorage)

//Редактирование задачи
const editTask = index => {
    //Проверка на завершённость задачи
    if(!todoItems[index].classList.contains('checked')){
        todoItems[index].setAttribute('contenteditable', true);
        todoItems[index].focus();

        oldValue = todoItems[index].textContent;

        //Функция выполняется при удалении фокуса с задачи
        todoItems[index].addEventListener("blur", function( event ) {
            let newValue = todoItems[index].textContent.trim();
            if(newValue != "" && newValue != oldValue){                 
                tasks[index].description = newValue;
            }
            else{
                tasks.splice(index, 1);
            }
            todoItems[index].removeAttribute('contenteditable', true);
            todoItems[index].classList.remove('editable');
        }, true);

        //Функция выполняется при нажатии на клавиши Enter и Escape
        todoItems[index].addEventListener('keydown', event => {
            if (event.key === 'Enter' || event.key === 'Escape') {
                let newValue = todoItems[index].textContent.trim();
                if(newValue != "" && newValue != oldValue){                  
                    tasks[index].description = newValue;
                }
                else{
                    tasks.splice(index, 0);
                }
                todoItems[index].removeAttribute('contenteditable', true);
                todoItems[index].classList.remove('editable');
            }
        })
    }
}

как я делю на несколько функций, но появляется ошибка "index is not defined". Я передавала в функции index, но появляется другая ошибка

//Редактирование задачи
const editTask = index => {
    //Проверка на завершённость задачи
    if(!todoItems[index].classList.contains('checked')){
        todoItems[index].setAttribute('contenteditable', true);
        todoItems[index].focus();

        oldValue = todoItems[index].textContent;
        todoItems[index].classList.add('editable');
        //Скрываем checkbox и кнопку удаления
        isDone[index].classList.add('hideS');
        deleteDuty[index].classList.add('hideS');
    }
}

document.addEventListener('blur', (event) => {
    if (event.target.classList.contains('todo-item')) {
        let newValue = event.target.textContent.trim();
        if(newValue != "" && newValue != oldValue){                 
            tasks[index].description = newValue;
        }
        else{
            tasks.splice(index, 1);
        }
        todoItems[index].removeAttribute('contenteditable', true);
        todoItems[index].classList.remove('editable');
    }
});

document.addEventListener('keydown', (event) => {
    if (event.target.classList.contains('todo-item') && event.key === 'Enter' || event.key === 'Escape') {
        let newValue = event.target.textContent.trim();
        if(newValue != "" && newValue != oldValue){                  
            tasks[index].description = newValue;
        }
        else{
            tasks.splice(index, 0);
        }
        todoItems[index].removeAttribute('contenteditable', true);
        todoItems[index].classList.remove('editable');
    }
  });