Javascript удалить слушатель событий

Question

Не понимаю, как удалить слушатели.

Вот Html:

        <div class="raiting-items">
            <input type="radio" class="raiting-item" value="1" name="raiting">
            <input type="radio" class="raiting-item" value="2" name="raiting">
            <input type="radio" class="raiting-item" value="3" name="raiting">
            <input type="radio" class="raiting-item" value="4" name="raiting">
            <input type="radio" class="raiting-item" value="5" name="raiting">
        </div>

Вот Javascript с комментариями:

function setRaiting(raiting) {
            const raitingItems = raiting.querySelectorAll('.raiting-item');

            for (let i = 0; i < raitingItems.length; i++) {
                const raitingItem = raitingItems[i];
                raitingItem.addEventListener("mouseenter", mouseEnter);
                raitingItem.addEventListener("mouseleave", mouseLeave);
                raitingItem.addEventListener("click", sendServer);
            }
            function mouseEnter(e) {
                console.log(e.target);
                initRaitingVars(raiting);
                setRaitingActiveWidth(e.target.value);
            }
            function mouseLeave(e) {
                initRaitingVars(raiting);
                setRaitingActiveWidth();
            }

            function sendServer(e) {
                for (let i = 0; i < raitingItems.length; i++) {
                    e.target.removeEventListener("click", clickListener);
                    e.target.removeEventListener("mouseenter", mouseEnterListener);
                    e.target.removeEventListener("mouseleave", mouseLeaveListener);
                }
            }

        }

Answer 1

В метод removeEventListener вторым аргументом нужно передать ту же самую функцию или объект, которые передавались в методе addEventListener. У вас при добавлении события вторым аргументом передается объект, а при удалении - функция.

Нужно вынести объекты в отдельные переменные и передавать их в оба обработчика.

Перед циклом:

const mouseEnterListener = { handleEvent: mouseEnter, raiting, value: raitingItem.value };
const mouseLeaveListener = { handleEvent: mouseLeave, raiting };
const clickListener = { handleEvent: sendServer, raiting, value: raitingItem.value, raitingItems };

В цикле при добавлении слушателя передавать эти объекты:

raitingItem.addEventListener("mouseenter", mouseEnterListener);
raitingItem.addEventListener("mouseleave", mouseLeaveListener);
raitingItem.addEventListener("click", clickListener);

Для удаления слушателей с одного элемента можно сделать так:

function sendServer(e) {
    e.target.removeEventListener("mouseenter", mouseEnterListener);
    e.target.removeEventListener("mouseleave", mouseLeaveListener);
    e.target.removeEventListener("click", clickListener);
}

БЛОГ НА HUSL

Javascript удалить слушатель событий

Ответы (1 шт):