javascript - Javascript Add/Remove EventListener 在 jQuery 自定义功能中的运行时不起作用
问题描述
我关心的只是添加 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]);
推荐阅读
- performance - 提高自动编码器网络的性能
- json - 将 JSON 反序列化为字典
- r - 如何在 R 中获取地理编码？
- c - 如何在 C++ 中将“elif”定义为“else if”？
- swift - 使用 macOS 共享应用程序模板为 SwiftUI 应用程序运行单元测试失败
- kubernetes - Kubernetes 无法执行 Pod
- android - 无法在背景中为 android 中的按钮添加图像
- nfs - Snakemake --use-conda 与 --cluster 和 NFS4 存储
- yaml - Openapi 3.0：有效负载不反映我的架构 allOf
- c# - 如何在 Xamarin Forms 中创建带有上下移动动画的弹出视图