Удалить прослушиватель событий в JavaScript

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

Используйте метод removeEventListener() для удаления прослушивателя событий в JavaScript

Если мы создаем элемент и не хотим, чтобы он выполнял предполагаемое поведение при взаимодействии с ним пользователя, мы должны удалить прослушиватель событий из этого элемента. Мы достигаем этого с помощью встроенной функции JavaScript removeEventListener(). Эта функция удаляет прикрепленный прослушиватель событий из элемента и останавливает его предопределенное действие. Мы можем отключить нажатие кнопки, удалив прикрепленный к ней прослушиватель событий.

Функция принимает следующие параметры:

  1. type: это строка, определяющая тип действия пользователя, для которого мы хотим удалить прослушиватель событий.
  2. listener: функция прослушивателя событий, которую мы хотим удалить из указанного элемента.
  3. options: это необязательный параметр, который помогает указать характеристики слушателя событий. Можно установить следующие параметры:
    • capture: это логическая переменная, указывающая, что событие перейдет к зарегистрированному слушателю перед перемещением к любому целевому событию в дереве DOM.
    • mozSystemGroup: логическая переменная, указывающая, что прослушиватель событий будет добавлен в системную группу. Он доступен только для кода, запущенного в Chrome XBL / Firefox.
  4. useCapture: это логическая переменная, которая сообщает, является ли слушатель событий захватывающим слушателем. Это также необязательный параметр.
var element_name = document.querySelector('#btn');
var count = 0;
var counter = function(event) {
    count++; 
    // perform the intended function in case of occurence of event 
    if(count == 2){ 
        this.removeEventListener('click', myHandler);
    } 
}
element_name.addEventListener('click', counter);

В приведенном выше коде мы добавляем прослушиватель событий и указываем функцию, которая будет выполняться, если прослушиватель запускается. Если пользователь пытается снова запустить тот же прослушиватель, мы удаляем прослушиватель событий с помощью removeEventListener(). Мы достигаем этого, сначала выбирая элемент, для которого мы хотим добавить / удалить прослушиватель событий. Затем мы инициализируем счетчик, чтобы вести подсчет количества кликов. Наконец, мы объявляем обработчик событий для запуска, а также увеличиваем счетчик. В случае, если пользователь щелкнет дважды, срабатывает removeEventListener().