Javascript添加/删除jQuery自定义功能中运行时不工作的EventListener

我关心的只是添加eventListner的函数，它只能在匿名方法中工作。但是我想不使用匿名函数来使用它。这样我可以稍后调用remove event listner。 请参阅initAndSetupTheSliders函数中的未禁用条件

var apprange = function () {
	function initAndSetupTheSliders(rangeValue, disabled = false,limitValue) {
		var inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
		inputs.forEach(function (input) {return input.setAttribute('value', rangeValue);});
		inputs.forEach(function (input) {return apprange.updateSlider(input,limitValue, disabled);});
				// Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
		if(!disabled){
############## Following two lines are not working as it should. ############
			inputs.forEach(function (input) {return input.addEventListener('input', eventHandler(input, limitValue, disabled));});
			inputs.forEach(function (input) {return input.addEventListener('change', eventHandler(input, limitValue, disabled));});
############# Code end ##################
		}else{
		inputs.forEach(function (input) {return input.removeEventListener('input', eventHandler(input, limitValue, disabled));});
		inputs.forEach(function (input) {return input.removeEventListener('change', eventHandler(input, limitValue, disabled));});
					console.log('#### 2');
				}
				
			}
			function eventHandler(input,limitValue, disabled){
				return apprange.updateSlider(input,limitValue, disabled);
			}
			function updateSlider(element, limitValue, disabled) {
				
			  if (element) {
				  
					var parent = element.parentElement,
					lastValue = parent.getAttribute('data-slider-value');

					if (lastValue === element.value) {
						return; // No value change, no need to update then
					}

					parent.setAttribute('data-slider-value', element.value);
					var $thumb = parent.querySelector('.range-slider__thumb'),
					$bar = parent.querySelector('.range-slider__bar'),
					$thumbLine = parent.querySelector('.range-slider__line'),
					pct = element.value * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
																	pctLimitLine = limitValue * ((parent.clientHeight - $thumb.clientHeight) / parent.clientHeight);
					$thumb.style.bottom = pct + '%';
					$thumbLine.style.bottom = pctLimitLine + 7 + '%';
					$bar.style.height = 'calc(' + pct + '% + ' + $thumb.clientHeight / 2 + 'px)';
					$thumb.textContent = element.value + '';
																	
					document.getElementById('range').value = element.value;
					
					/* Emoticons Margins */
					if(disabled && false){
						var sliderHeight = parent.clientHeight;
						var multiplier = sliderHeight / 100;
						var UpperRegionHeight = (100 - limitValue) * multiplier;
						var LowerRegionHeight = sliderHeight - UpperRegionHeight;
						
						document.getElementsByClassName('icon_max_smily')[0].setAttribute("style", "height:"+UpperRegionHeight+"px");
						document.getElementsByClassName('icon_high_smily')[0].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");
						document.getElementsByClassName('icon_medium_smily')[0].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");
						document.getElementsByClassName('icon_low_smily')[0].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");
						if(document.getElementsByClassName('icon_max_smily')[1] !== undefined){
							document.getElementsByClassName('icon_max_smily')[1].setAttribute("style", "height:"+UpperRegionHeight+"px");
							document.getElementsByClassName('icon_high_smily')[1].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");
							document.getElementsByClassName('icon_medium_smily')[1].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");
							document.getElementsByClassName('icon_low_smily')[1].setAttribute("style", "height:"+(LowerRegionHeight/3)+"px");	
						}
						apprange.HighlightSmiley(limitValue, element.value);
					}
			  }
			}
			function HighlightSmiley(limitValue, selectedValue){
				if(selectedValue >= limitValue){
					console.log('if');
					document.getElementsByClassName('icon_max_smily')[0].querySelector('img').setAttribute("width", "70px");
					if(document.getElementsByClassName('icon_max_smily')[1] !== undefined){
						document.getElementsByClassName('icon_max_smily')[1].querySelector('img').setAttribute("width", "70px");
					}
				}else{
					var limitMultiplier = limitValue/3;
					if(selectedValue >= 0 && selectedValue < limitMultiplier){
						document.getElementsByClassName('icon_low_smily')[0].querySelector('img').setAttribute("width", "70px");
						if(document.getElementsByClassName('icon_low_smily')[1] !== undefined){
							document.getElementsByClassName('icon_low_smily')[1].querySelector('img').setAttribute("width", "70px");
						}
					}else if(selectedValue >= limitMultiplier && selectedValue < 2*limitMultiplier){
						document.getElementsByClassName('icon_medium_smily')[0].querySelector('img').setAttribute("width", "70px");
						if(document.getElementsByClassName('icon_medium_smily')[1] !== undefined){
							document.getElementsByClassName('icon_medium_smily')[1].querySelector('img').setAttribute("width", "70px");
						}
					}else if(selectedValue >= 2*limitMultiplier && selectedValue < limitValue){
						document.getElementsByClassName('icon_high_smily')[0].querySelector('img').setAttribute("width", "70px");
						if(document.getElementsByClassName('icon_high_smily')[1] !== undefined){
							document.getElementsByClassName('icon_high_smily')[1].querySelector('img').setAttribute("width", "70px");
						}
					}
				}
			}

			function removeEventHandler(){

			}
			return {
					initAndSetupTheSliders: initAndSetupTheSliders,
					updateSlider: updateSlider,
					HighlightSmiley: HighlightSmiley,
					eventHandler: eventHandler};
	}();
	
我认为您对函数作为参数传递时如何工作感到困惑-您对addEventListener和forEach都做了相同的事情。以您的解决方案为例：

inputs.forEach(function (input) {return input.setAttribute('value', '50');});

这将为每个输入创建N个函数，每个函数都执行相同的操作：获取一个输入元素并将该元素的value属性设置为50。既然他们都做同样的事情，你也可以说

inputs.forEach(fixIt);
function fixIt(input) {
    input.setAttribute('value', '50');
}

addEventListener也是如此，但事件处理程序已经可以通过evt.target访问调用它们的元素。而不是

element.addEventListener('input', function (evt) {return app.updateSlider(element);});

你可以说,

element.addEventListener('input', eventHandler);
function eventHandler(evt) {
    app.updateSlider(evt.target);
}

然后，说起来就简单了

element.removeEventListener('input', eventHandler);

最后，看起来所有输入都以相同的方式初始化，因此您可以使用相同的函数初始化所有输入：

(function initAndSetupTheSliders() {
    var inputs = [].slice.call(document.querySelectorAll('.range-slider input'));
    inputs.forEach(function (input) {return input.setAttribute('value', '50');});
    inputs.forEach(function (input) {return app.updateSlider(input);});
    // Cross-browser support where value changes instantly as you drag the handle, therefore two event types.
    inputs.forEach(function (input) {return input.addEventListener('input', function (element) {return app.updateSlider(input);});});
    inputs.forEach(function (input) {return input.addEventListener('change', function (element) {return app.updateSlider(input);});});
})();

变成：

function initSlider(element) {
    element.setAttribute('value', '50');
    app.updateSlider(element);
    element.addEventListener('input', function (evt) {return app.updateSlider(element);});
    element.addEventListener('change', function (evt) {return app.updateSlider(element);});
}

document.querySelectorAll('.range-slider input')).forEach(initSlider);

因此，为了避免匿名函数并添加禁用滑块的功能，您需要：

function initSlider(element) {
    element.setAttribute('value', '50');
    app.updateSlider(element);
    element.addEventListener('input', eventHandler);
    element.addEventListener('change', eventHandler);
}

document.querySelectorAll('.range-slider input').forEach(initSlider)

function eventHandler(evt) {
    return app.updateSlider(evt.target);
}

function unInitSlider(element) {
    element.removeEventListener('input', eventHandler);
    element.removeEventListener('change', eventHandler);
}

unInitSlider(document.querySelectorAll('.range-slider input')[1]);

已经运行的示例如下：但正如我在讨论中所说的，我想去掉匿名函数。这将是我的一个大忙。