Javascript 添加/删除事件监听器在 jQuery 自定义功能运行时不起作用

Question

我关心的只是添加eventListner的函数，它仅适用于匿名方法。但我想在没有匿名函数的情况下使用它。这样我就可以稍后调用删除事件监听器。请参阅 initAndSetupTheSliders 函数中未禁用的情况。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>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};
	}();
	</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    *, *:before, *:after {
      box-sizing: border-box;
    }

    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      background: #3D3D4A;
      color: white;
      min-height: 400px;
      font-family: sans-serif;
    }

    .info {
      position: absolute;
      top: 0;
      left: 0;
      padding: 10px;
      opacity: .5;
    }

    .container {
      padding-top: 40px;
      position: relative;
      display: inline-block;
      top: 100%;
      left: 50%;
      transform: translate(-50%, -100%);
      padding-bottom: 20px;
    }
    @media (min-height: 500px) {
      .container {
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        padding-bottom: 0;
      }
    }

    .range-slider {
      display: inline-block;
      width: 40px;
      position: relative;
      text-align: center;
      height: 300px;
      max-height: 100%;
    }
    .range-slider:before {
      position: absolute;
      top: -2em;
      left: .5em;
      content: attr(data-slider-value) "%";
      color: white;
      font-size: 90%;
    }
    .range-slider__thumb {
      position: absolute;
      left: 5px;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background: white;
      color: #777;
      font-size: 50%;
      box-shadow: 0 0 0 4px #3D3D4A;
      border-radius: 50%;
      pointer-events: none;
    }
    .range-slider__bar {
      left: 12px;
      bottom: 0;
      position: absolute;
      background: linear-gradient(to left, #ffc000 37%, #c64e13 50%);
      pointer-events: none;
      width: 18px;
      border-radius: 10px;
    }
    .range-slider input[type=range][orient=vertical] {
      position: relative;
      margin: 0;
      height: 100%;
      width: 100%;
      display: inline-block;
      position: relative;
      writing-mode: bt-lr;
      -webkit-appearance: slider-vertical;
    }
    .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track, .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
      -webkit-appearance: none;
    }
    .range-slider input[type=range][orient=vertical]::-webkit-slider-runnable-track {
      border: none;
      background: #343440;
      width: 18px;
      border-color: #343440;
      border-radius: 10px;
      box-shadow: 0 0 0 2px #3D3D4A;
    }
    .range-slider input[type=range][orient=vertical]::-moz-range-track {
      border: none;
      background: #343440;
      width: 18px;
      border-color: #343440;
      border-radius: 10px;
      box-shadow: 0 0 0 2px #3D3D4A;
    }
    .range-slider input[type=range][orient=vertical]::-ms-track {
      border: none;
      background: white;
      width: 18px;
      border-color: #343440;
      border-radius: 10px;
      box-shadow: 0 0 0 2px #3D3D4A;
      color: transparent;
      height: 100%;
    }
    .range-slider input[type=range][orient=vertical]::-ms-fill-lower, .range-slider input[type=range][orient=vertical]::-ms-fill-upper, .range-slider input[type=range][orient=vertical]::-ms-tooltip {
      display: none;
    }
    .range-slider input[type=range][orient=vertical]::-webkit-slider-thumb {
      width: 30px;
      height: 30px;
      opacity: 0;
    }
    .range-slider input[type=range][orient=vertical]::-moz-range-thumb {
      width: 30px;
      height: 30px;
      opacity: 0;
    }
    .range-slider input[type=range][orient=vertical]::-ms-thumb {
      width: 30px;
      height: 30px;
      opacity: 0;
    }

    .theme1 {
      background: linear-gradient(pink, deeppink);
    }

    .theme2 {
      background: linear-gradient(tomato, red);
    }

    .theme3 {
      background: linear-gradient(yellow, orange);
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div class="container">

      <div class="range-slider">
        <input type="range" orient="vertical" min="0" max="100" />
        <div class="range-slider__bar"></div>
        <div class="range-slider__thumb"></div>
      </div>
    </div></code></pre>
</div>
</div>

Answer 1

我认为您对函数作为参数传递时如何工作感到困惑 - 您对 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);

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

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]);