在 addEventListener 中处理“this”答案

【问题标题】：handling 'this' in an addEventListener在 addEventListener 中处理“this”
【发布时间】：2018-02-15 01:49:12
【问题描述】：

我想调用handleRangeUpdate，使其依赖于调用它的事件，以便它可以决定执行console.log(this.value)

但是，在通过addEventListener 将e 传递给handleRangeUpdate 时，this 的值会从input 更改为window，或者根本不调用handleRangeUpdate，这取决于我是否使用箭头函数或尝试将this 绑定/调用到侦听器。

我的问题和问题是这个（不是双关语），我如何将正确的 this 传递给addEventListener 中的听众？

const sliders = player.querySelectorAll('.player__slider');
sliders.forEach(slider => slider.addEventListener('change', handleRangeUpdate));
sliders.forEach(slider => slider.addEventListener('mousemove', handleRangeUpdate));

以及滑块的 html：

<input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">

【问题讨论】：

简单...不要使用箭头函数符号 - 即使用正确的工具完成工作，凿子不擅长锤钉
您必须使用function 定义handleRangeUpdate，否则无法将动态this 传递给它。如果你因为某种原因坚持使用箭头函数或绑定函数，你只能使用e.currentTarget而不是this。
您需要添加一个Minimal, Complete, and Verifiable 示例，以便我们为您提供帮助。
箭头函数不仅仅是语法糖。

标签： javascript html this addeventlistener

【解决方案1】：

我相信这会奏效，但如果你有来自 codepen 的代码示例会更有帮助。您需要绑定处理程序。 addEventListener 将始终在触发事件的元素或对象的 this 上下文中执行处理函数。

const sliders = player.querySelectorAll('.player__slider');
sliders.forEach(slider => slider.addEventListener('change', () => handleRangeUpdate.bind(this)));
sliders.forEach(slider => slider.addEventListener('mousemove', ()=> handleRangeUpdate.bind(this)));

【讨论】：

OP到目前为止发布的代码没有任何问题。但是，您的 sn-p 肯定行不通。