我的关注只是添加eventListner的功能，它仅以匿名方法起作用。但是我想在没有匿名功能的情况下使用它。这样我稍后可以致电删除事件列表。请参阅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};
}();
*, *: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);
}
<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>
我认为您对作为参数传递时的功能的工作方式感到困惑 - 您对AddeventListener和foreach都做同样的事情。采用一条解决方案：
inputs.forEach(function (input) {return input.setAttribute('value', '50');});
这会创建n个函数（每个 inputs中的每个函数），都做同样的事情：采用输入元素并将该元素的 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);
最后，看起来所有inputs都以相同的方式初始化，因此您可以使用相同的功能来初始化所有功能：
(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]);