Javascript 在in'；中使用具有两个函数的函数；增补列表器'；它不起作用了

我已经向range元素添加了两个事件侦听器，我想在修改它时更新它的值。。。如果我在addEventListener方法中的一个函数中添加两个函数，它不会更新，但是如果它们是分开的，我可以这样做

const input=document.getElementById（'blur'）；
const span=document.getElementById（'blur-value'）；
函数updateBlur（）{
const suffix=input.dataset.sizing | |“”；
document.documentElement.style.setProperty（`-${this.name}`，this.value+后缀）；
}
函数updateSpan（）{
span.innerText=input.value；
}
//这行不通
input.addEventListener（'mousemove'，（）=>{
updateBlur（）；
updateSpan（）；
});
//这是解决办法
/*
input.addEventListener（'mousemove'，updateBlur）；
addEventListener（'mousemove'，updateSpan）；
*/

：根目录{
--模糊度：10px；
}
img{
过滤器：模糊（var（--blur））；
}

模糊：
价值

问题在于

此

引用，当您从事件回调函数调用时，它会丢失

此

引用。这里使用了一个更新的函数，可以解决这个问题

function updateBlur() {
  const suffix = input.dataset.sizing || '';
  // this reference getting lost when you are calling from a callback function instead of binding in the event.
   
  document.documentElement.style.setProperty(`--${input.name}`, input.value + suffix);
}

const input=document.getElementById（'blur'）；
const span=document.getElementById（'blur-value'）；
函数updateBlur（）{
const suffix=input.dataset.sizing | |“”；
//当您从回调函数而不是在事件中绑定调用时，此引用将丢失。
document.documentElement.style.setProperty（`-${input.name}`，input.value+后缀）；
}
函数updateSpan（）{
span.innerText=input.value；
}
//这行不通
input.addEventListener（'mousemove'，（）=>{
updateBlur（）；
updateSpan（）；
});
//这是解决办法
/*
input.addEventListener（'mousemove'，updateBlur）；
addEventListener（'mousemove'，updateSpan）；
*/

：根目录{
--模糊度：10px；
}
img{
过滤器：模糊（var（--blur））；
}

模糊：
价值

谢谢，这很有效，但是如果代码中有更多的输入，会发生什么呢？此时，关键字this将非常有用。您可以将“this”关键字绑定到函数。你可以阅读更多关于它的内容。这个关键词真的很重要，大多数时候我们都把它丢了。