Не удаляется функция обработчик с помощью removeEventListener

Question

Пробую переписать часть функционала в качестве модулей и столкнулся с проблемой, что не могу с кнопки searchBtn удалить с помощью removeEventListener функцию обработчик openSearchInput .

const app = (function(){
            return {
                init: function(){
                    document.addEventListener("DOMContentLoaded", function () {
                        search.init();  
                    })
                }
            }
        })();
    
    app.init();

    //модуль search
    const search = (function(){
    
        const headerInner = document.querySelector('.header__inner'),
        searchInput = document.querySelector('.search__input'),
        searchBtn = document.querySelector('.search__button');
    
        return {
            init: function(){
                if (window.screen.width <= 768) searchBtn.addEventListener("click", this.openSearchInput.bind(this));
            },
            openSearchInput:  function () {
                event.preventDefault();
                headerInner.classList.add('header__inner--search-open');
                searchInput.classList.add('search__input--open');
                searchBtn.removeEventListener('click', this.openSearchInput);
            }
        }
    })()

Ранее код выглядел таким образом и все работало:

document.addEventListener("DOMContentLoaded", function () {
  if (window.screen.width <= 768) searchBtn.addEventListener("click", openSearchInput);
});

const openSearchInput = function () {
    event.preventDefault();
    headerInner.classList.add('header__inner--search-open');
    searchInput.classList.add('search__input--open');
    searchBtn.removeEventListener('click', openSearchInput);
    
}

Answer 1

addEventListener() и removeEventListener() должны ссылаться на одну и ту же функцию, но bind() создаёт и возвращает новую функцию, не тождественную той, что вы пытаетесь удалить. Попробуйте, например, так:

    const search = (function(){

        const headerInner = document.querySelector('.header__inner'),
        searchInput = document.querySelector('.search__input'),
        searchBtn = document.querySelector('.search__button');

        return {
            init: function(){
                if (window.screen.width <= 768) searchBtn.addEventListener("click", this.openSearchInput);
            },
            openSearchInput: function openSearchInput(event) {
                event.preventDefault();
                headerInner.classList.add('header__inner--search-open');
                searchInput.classList.add('search__input--open');
                searchBtn.removeEventListener('click', openSearchInput);
            }
        };
    })();

Answer 2

Решил следующим образом

const search = (function(){

    const headerInner = document.querySelector('.header__inner'),
          searchInput = document.querySelector('.search__input'),
          searchBtn = document.querySelector('.search__button');

        
    return {
        init: function(){
            this.ref  = this.openSearchInput.bind(this);
            if (window.screen.width <= 768) searchBtn.addEventListener("click", this.ref);
        },
        openSearchInput:  function () {
            event.preventDefault();
            headerInner.classList.add('header__inner--search-open');
            searchInput.classList.add('search__input--open');
            searchBtn.removeEventListener('click', this.ref);
        }
    }
})()

БЛОГ НА HUSL

Не удаляется функция обработчик с помощью removeEventListener

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