javascript 处理程序处理程序/Обработчикобработчикадлякорректногоудалениясобытий

Posted 2021-05-04

//https://stackoverflow.com/questions/5660131/how-to-removeeventlistener-that-is-addeventlistener-with-anonymous-function

// variant
var handler;

function doSomethingWith(param) {
    handler = function(){
        document.write(param);
    };  
    document.body.addEventListener('scroll', handler,false);
}
setTimeout(function() {
     document.body.removeEventListener('scroll', handler ,false);
}, 3000);

//and this cool handler handler
var Handler = (function(){
    var i = 1, listeners = {};
    return {
        addListener: function(element, event, handler, capture) {
            element.addEventListener(event, handler, capture);
            listeners[i] = {
              element: element, 
              event: event, 
              handler: handler, 
              capture: capture
            };
            return i++;
        },
        removeListener: function(id) {
            if(id in listeners) {
                var h = listeners[id];
                h.element.removeEventListener(h.event, h.handler, h.capture);
                delete listeners[id];
            }
        }
    };
}());
// use this
function sayHello(params) {
    return Handler.addListener(params.elem, params.event, function() {
        alert(params.text);
    }, false);
}

var handlerParams = {
  elem: document.body,
  event: 'click',
  text: 'Hello World!'
};
var sayHelloHandler = sayHello(handlerParams);

Handler.removeListener(sayHelloHandler); // remove

var HotelNames = {

    init: function () {
        this.initAppVars();
        this.initAppListeners();
    },
    /**
     * Инициализация переменных
     */
    initAppVars: function () {
        // В объекте лежат все свойства прослушки. {id: {element: ..., event: ..., handler: ..., capture: ...}}
        this.listeners = {};
        // В массиве лежат идентификаторы прослушок для, например, кнопок. [0, 1, 2, ...]
        this.btnHandlers = [];
    },
    /**
     * Инициализация прослушек
     */
    initAppListeners: function() {
        // Например, для кнопок
        this.addBtnListeners()
    },
    /**
     * Добавляет прослушку
     * @param element
     * @param event
     * @param handler
     * @param capture
     * @returns {number} Идентификатор прослушки
     */
    addListener: function (element, event, handler, capture) {
        var i = Object.keys(this.listeners).length;
        element.addEventListener(event, handler, capture);
        this.listeners[i] = {
            element: element,
            event: event,
            handler: handler,
            capture: capture
        };
        return i;
    },
    /**
     * Удаляет прослушку по идентификатору
     * @param id
     */
    removeListener: function (id) {
        var h;
        if (id in this.listeners) {
            h = this.listeners[id];
            h.element.removeEventListener(h.event, h.handler, h.capture);
            delete this.listeners[id];
        }
    },
    /**
     * Инициализация событий для кнопок
     */
    addBtnListeners: function () {
        var i, btn;
        var buttons = $('.synonyms-hotels-btn');
        for (i = 0; i < buttons.length; i++) {
            btn = buttons[i];
            // Сохраним идентификаторы прослушек для кнопок в массив
            this.btnHandlers[this.btnHandlers.length] = this.addListener(btn, 'click', HotelNames.actionButton, false);
        }
    },
    /**
     * Удаляет все прослушки с кнопок plus|minus
     */
    removeBtnListeners: function () {
        // Просто проходимся по массиву с идентификаторами прослушек для кнопок и запукаем удаление прослушек
        for (var i = 0; i < this.btnHandlers.length; i++) {
            this.removeListener(this.btnHandlers[i]);
        }
        // Не забудем очистить массив, т.к. кнопки более не прослушиваются и идентификаторов не должно быть
        this.btnHandlers = [];
    },
    /**
     * Действие при нажатии на кноку plus|minus
     * @param e
     */
    actionButton: function (e) {
        // А это само действия для кнопок
        var elem = $(e.target);
        while ($(elem).hasClass('synonyms-hotels-btn') !== true) {
            elem = $(elem).parent();
        }
        var action = $(elem).data('action');
        var wrapper = $(elem).parent();
        var wrapperClassName = $(wrapper).attr('class');
        var mainBlock = $(wrapper).parent();
        var plusBtn = $(wrapper).find('.icon-plus-sign').parent();
        if (action === 'add') {
            $.ajax({
                loader: _('Загрузка'),
                method: 'post',
                url: '/module/dictionary/SLDict/addSynonymsField',
                data: {type: $(elem).data('type')},
                success: function (data) {
                    $.prompt.close();
                    if (data.ok) {
                        var newElem = $(data.view);
                        $(mainBlock).append(newElem);
                        $(mainBlock).find('.' + wrapperClassName + ':last').append(plusBtn);
                        // Состав (количество или др.) кнопок поменялся, удалим старые прослушки
                        HotelNames.removeBtnListeners();
                        // Назначим новые
                        HotelNames.addBtnListeners();
                    } else {
                        // error
                    }
                },
                dataType: 'json'
            });
        } else {
            $(wrapper).find('input').val('');
            var children = $(mainBlock).children('.' + wrapperClassName);
            if (children.length > 1) {
                $(wrapper).remove();
            }
            $(mainBlock).find('.' + wrapperClassName + ':last').append(plusBtn);
        }
    }
};