当使用不同的html范围滑块时进行检测，并在不重新加载每个步骤或焦点的图像的情况下显示图像

Question

假设我有两个基本的范围滑块，像这样-

<input type="range" id="one">
<input type="range" id="two">

我想在使用第一个滑块时显示图像#1，在使用滑块二时显示图像#2。

当页面加载时，我会显示这个默认图像，当javascript中使用滑块时，我将切换图像。

<img src="image.jpg" class="image" style="display:none;"/>

JS-

var sliderOne = document.getElementById("one");
sliderOne.oninput = function() {
$('.image').fadeOut(200);
$('.image').replaceWith('<img src="one.jpg" class="image" style="display:none;"/>');
$('.image').fadeIn(200);
}
var sliderTwo = document.getElementById("two");
sliderTwo.oninput = function() {
$('.image').fadeOut(200);
$('.image').replaceWith('<img src="two.jpg" class="image" style="display:none;"/>');
$('.image').fadeIn(200);
}

在这一点上一切都很好，图像一淡出，图像二淡出。但如果你还看不到它，问题就来了。图像会随着滑块的每一步重新加载，或者如果用户将焦点向外并返回到同一滑块中。我只想在使用新滑块后加载图像。如何检测不同的滑块何时在使用，以便确保仅在滑块之间的初始切换时加载图片？

• 注意：我为这篇文章写了这个例子，而不是我的实际脚本。寻找实现这一点的逻辑不一定只是代码

Answer 1

我想明白了，使用带焦点的addEventListener解决了这个问题。

sliderOne.addEventListener('focus', function() {});