Как убрать обработчик события при вызове функции?

Question

[pinkhead_psd]

В качестве примера у меня есть два обработчика событий. Первому функция test передается по ссылке без каких-либо аргументов:

const box = document.querySelector('.box');
const area = document.querySelector('.in__box')

area.addEventListener('mousemove',test);

Второй уже вызывает внутри себя функцию move и передает в качестве аргумента объект события:

box.addEventListener('mousemove',(e) => {
    move(e)
})

Сами же функции выводят допустим что-то в консоль лог и убирают обработчик событий:

function move (e){
    area.style.transition = 'none'
    area.style.top = e.clientY-50+'px'
    area.style.left = e.clientX-50+'px'
    console.log('move1');
    box.removeEventListener('mousemove',move)
}

function test(){
    console.log('move2');
    area.removeEventListener('mousemove',test)
}

Когда я передаю функцию по ссылке все отрабатывает как надо, но если вызывать ее, то обработчик не убирается. Как я могу передать функции событие и потом внутри нее убрать обработчик?

Answer 1

[Алексей Уколов]

Запись box.addEventListener('mousemove', move) будет работать ровно так, как вам нужно. И удалить обработчик потом можно без проблем.

Если же вам нужно не просто пробросить аргумент (что делается автоматически в записи выше), а выполнить дополнительные действия, то нельзя использовать анонимную функцию:

const handler = (e) => {
    e.preventDefault();
    move(e)
};

const move = (e) => {
    console.log(e);
    box.removeEventListener('mousemove', handler)
}

box.addEventListener('mousemove', handler);

Comments

[pinkhead_psd]

Действительно, уже какие-то глупые ошибки допускаю)) Но все равно, спасибо!

Answer 2

[Дмитрий Беляев]

Если обработчик должен отрабатывать ровно 1 раз, то лучше передавать опцию once:

box.addEventListener('mousemove', move, { once: true });

https://developer.mozilla.org/en-US/docs/Web/API/E...