Срабатывание обработчика событий

function handleFormSubmit(e) {
    e.preventDefault()
 
    const title = document.querySelector('#title').value;
    const genre = document.querySelector('#genre').value;
    const releaseYear = document.querySelector('#releaseYear').value;
    const isWatched = document.querySelector('#isWatched').checked;
 
    const film = {
        title,
        genre,
        releaseYear,
        isWatched,
        indexFilm: '0'
    }
 
    addFilmsLocalStorage(film)
}
 
function addFilmsLocalStorage(film) {
 
    // достаем список если есть.
    // если фильмов нет  то присваиваем [](массив в который добавим фильм)
    const films = JSON.parse(localStorage.getItem('films')) || [];
    //добавляем фильм
 
    films.push(film)
 
    //записываем в локалстор ключ Films и строку JSONa
    localStorage.setItem('films', JSON.stringify(films))
 
    renderTable()
}
//вывод филмов
function renderTable() {
    let count = 0
    let films = JSON.parse(localStorage.getItem('films')) || [];
    //вывод строки в таблицу
 
    const filmTableBody = document.querySelector('#film-tbody');
    filmTableBody.innerHTML = ''
 
    films.forEach(film => {
 
        count++
        film.indexFilm = count
        const row = document.createElement('tr');
 
        row.innerHTML = `
            <td>${film.title}</td>
            <td>${film.genre}</td>
            <td>${film.releaseYear}</td>
            <td>${film.isWatched ? 'Да' : 'Нет'}</td>
            <td>
                <button class="editFilm" value='${film.indexFilm}'>Редактировать</button>
                <button class="delFilm" value='${film.indexFilm}'>Удалить</button>
            </td>
            `
        filmTableBody.appendChild(row)
        row.classList.add(film.indexFilm)
    });
}
renderTable()
 
document.querySelector('#film-form').addEventListener('submit', handleFormSubmit)
 
//добавление функций
    
 
const editFilm = document.querySelectorAll('.editFilm');
const delFilm = document.querySelectorAll('.delFilm');
const itemSelect = document.querySelector('#itemSelect');
const sortFilms = document.querySelector('#sortFilms');
 
function deletFilmFunc() {
    const index = delFilm.value
    const films = JSON.parse(localStorage.getItem('films')) || [];
    //удаляем фильм
 
    films.splice(index, 1)
 
    //записываем в локалстор ключ Films и строку JSONa
    localStorage.setItem('films', JSON.stringify(films))
 
    renderTable()
 
}
 
 
delFilm.addEventListener("click", function (e) {
    e.preventDefault()
    
    deletFilmFunc()
});

const delFilm = document.querySelectorAll('.delFilm');