Как удалить обработчик событий js
Перейти к содержимому

Как удалить обработчик событий js

  • автор:

Как удалить обработчик события?

andrhohlov

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

Не вижу всей картины, происходящего у вас. Я делаю примерно так:

class SomeModule < constructor() < this.handlerShim = (e) =>< this.handler(e); >; > method1() < document.addEventListener('click', this.handlerShim); >method2() < document.removeEventListener('click', this.handlerShim); >handler(e) < console.log(e); >>

Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать

virtual_hack2root

Артур Мустафин @virtual_hack2root
.NET Core, JS, DevOps

var handler_button_right_click = this.play_right.bind(this); this.button_right.addEventListener('click', handler_button_right_click); //. this.button_right.removeEventListener('click', handler_button_right_click);

EventTarget: метод removeEventListener()

Метод removeEventListener() интерфейса EventTarget удаляет слушателя событий, зарегистрированного с помощью EventTarget.addEventListener() . Удаляемый слушатель событий определяется комбинацией типа события, функцией обработчика и дополнительными параметрами, влияющими на процесс обработки.

Вызов removeEventListener() с аргументами, которые не определяют зарегистрированного на EventTarget слушателя событий, не имеет эффекта.

Если слушатель событий удаляется в то время, когда другой слушатель обрабатывает событие, он не будет вызван. Однако его можно зарегистрировать повторно.

Предупреждение: Если слушатель зарегистрирован дважды, с флагом capture и без него, то необходимо удалять каждого слушателя по отдельности. Удаление слушателя захвата события не повлияет на слушателя всплытия этого события, и наоборот.

Слушатели событий также можно удалить передачей сигнала AbortSignal в addEventListener() и последующим вызовом abort() на контроллере, владеющем сигналом.

Синтаксис

removeEventListener(type, listener) removeEventListener(type, listener, options) removeEventListener(type, listener, useCapture) 

Параметры

Строка, описывающая тип события, которое нужно удалить.

Функция обработчика события для удаления.

Объект настроек, описывающий характеристики обработчика события:

  • capture : Логическое значение, определяющее зарегистрирован ли удаляемый слушатель событий на фазу захвата или нет. Если этот параметр опущен, то применяется значение по умолчанию false .

Логическое значение, определяющее зарегистрирован ли удаляемый слушатель событий на фазу захвата или нет. Если этот параметр опущен, то применяется значение по умолчанию false .

Возвращаемое значение

Определение слушателя событий для удаления

Иногда возникает необходимость удалить зарегистрированного с помощью addEventListener() слушателя событий.

Очевидно, что для removeEventListener() нужно указать те же параметры type и listener . Но что делать с параметрами options или useCapture ?

addEventListener() позволяет добавить одного и того же слушателя для одного типа событий более одного раза если отличаются настройки. При удалении слушателя removeEventListener() проверяет только флаг capture / useCapture . Его значение должно совпасть, а другие настройки не учитываются.

Например, представим такой вызов addEventListener() :

.addEventListener("mousedown", handleMouseDown, true); 

Теперь рассмотрим каждый из двух вызовов removeEventListener() :

.removeEventListener("mousedown", handleMouseDown, false); // Не сработает element.removeEventListener("mousedown", handleMouseDown, true); // Выполнится успешно 

Первый вызов не сработает потому, что значение useCapture не совпадает. Второй вызов будет успешен, потому что значение useCapture совпадает.

Теперь рассмотрим такой случай:

.addEventListener("mousedown", handleMouseDown,  passive: true >); 

Здесь мы задаём объект options , в котором значение passive установлено в true , а другие настройки не указаны, то есть будут иметь значение по умолчанию false .

Теперь рассмотрим вызовы removeEventListener() с разными параметрами. Те из них, в которых capture или useCapture установлены в true , не сработают, остальные выполнятся успешно.

Только настройка capture имеет значение при вызове removeEventListener() .

.removeEventListener("mousedown", handleMouseDown,  passive: true >); // Выполнится успешно element.removeEventListener("mousedown", handleMouseDown,  capture: false >); // Выполнится успешно element.removeEventListener("mousedown", handleMouseDown,  capture: true >); // Не сработает element.removeEventListener("mousedown", handleMouseDown,  passive: false >); // Выполнится успешно element.removeEventListener("mousedown", handleMouseDown, false); // Выполнится успешно element.removeEventListener("mousedown", handleMouseDown, true); // Не сработает 

Стоит отметить, что некоторые версии браузеров ведут себя противоречиво, поэтому если нет особых причин для иного, при вызове removeEventListener() лучше использовать те же параметры, которые использовались для вызова addEventListener() .

Пример

В этом примере показано как можно добавить слушателя событий mouseover , который будет удалять слушателя событий click .

const body = document.querySelector("body"); const clickTarget = document.getElementById("click-target"); const mouseOverTarget = document.getElementById("mouse-over-target"); let toggle = false; function makeBackgroundYellow()  body.style.backgroundColor = toggle ? "white" : "yellow"; toggle = !toggle; > clickTarget.addEventListener("click", makeBackgroundYellow, false); mouseOverTarget.addEventListener("mouseover", () =>  clickTarget.removeEventListener("click", makeBackgroundYellow, false); >); 

Спецификации

Specification
DOM Standard
# ref-for-dom-eventtarget-removeeventlistener②

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

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

Добрый день! У меня такая проблема, мне необходимо передать аргумент в обработчик события. Но затем при другом событии нужно нужно этот обработчик удалить. Не могу понять, как это сделать. Пример:

const but1 = useRef(null) const but2 = useRef(null) const handleButtonMove = () => ( (event) => < console.log(event.target) >) const handleButtonClick = (elBut1) => ( (event) => < elBut1.removeEventListener("mousemove", handleButtonMove()) >) useEffect(() => < const elBut1 = but1.current const elBut2 = but2.current elBut1.addEventListener("mousemove", handleButtonMove()) elBut2.addEventListener("click", handleButtonClick(elBut1)) >, []) return ( 
)
  • Вопрос задан более двух лет назад
  • 616 просмотров

4 комментария

Простой 4 комментария

insighter

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

Может код не весь, но вы отписываетесь от событий на которые повесились в useEffect?
andrey_chirkin @andrey_chirkin Автор вопроса

insighter, У меня это встречается в следующей задаче. Есть таблица, в которой размер столбцов должен менять динамически, когда растягиваем столбец. Используется три события мыши: mousedown, mousemove(когда мы тянем столбец, при зажатой мыши), mouseUp. При mouseUp мне нужно удалить событие mouseMove.

const onMouseUpRightResize = (id) => ( () => < document.removeEventListener("mousemove", onMouseMoveRightResize(id)) >) const onMouseMoveRightResize = (id) => ( (event) => < const dx = event.clientX - x x = event.clientX width = width + dx setColWidth() console.log('width =', width) document.addEventListener("mouseup", onMouseUpRightResize(id)) > ) const onMouseDownRightResize = (event) => < x = event.clientX const = event.target console.log('Default width =', width) document.addEventListener("mousemove", onMouseMoveRightResize(id)) >

удалить событие js

В предыдущем примере мы создавали и вызывали новое событие на элементе body . Теперь, удалим обработчик этого события:

function customClickHandler(event)  console.log('Сработало событие'); console.log(event.detail.msg); > const customClickEvent = new CustomEvent('customClick',  detail:  msg: 'some message', data: '. ', >, >); document.body.addEventListener('customClick', customClickHandler); // Назначаем обработчик событию document.body.dispatchEvent(customClickEvent); // Запускаем событие document.body.removeEventListener('customClick', customClickHandler); // Удаляем обработчик событий 

Функция customClickHandler() обрабатывает событие customClickEvent и выводит сообщение в консоль. Далее, создается новое событие CustomEvent с именем customClick и свойством detail , содержащим объект с свойством данными. Затем метод addEventListener() используется для добавления обработчика события к элементу document.body . Запускается событие customClickEvent с помощью метода dispatchEvent() .

Наконец, метод removeEventListener() вызывается на элементе document.body , чтобы удалить обработчик событий. Важно, функция-обрабочик должна быть задана отдельно. Только в этом случае удаление обработчика будет успешным.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *