从jQuery到vanilla JavaScript的语法。函数的工作原理不同

我在jQuery中有以下代码：

$("#input").change(function(){
    var input = this;
    console.log(input);
});

当输入发生更改时，该元素在控制台中显示为html。 我尝试将其更改为普通JavaScript，如下所示：

var img = document.getElementById('input');
img.addEventListener( 'change' , () => {
    var input = this;
    console.log(input);
});

控制台中的输出是整个html文档，而不仅仅是输入元素。有人能给我解释一下为什么会这样吗

谢谢大家!

从

箭头函数没有自己的

此

。

此

值 使用封闭的词汇范围；箭头功能遵循正常设置 变量查找规则。因此，在搜索

时，此

不是 在当前作用域中，一个箭头函数最终会找到

this

从它的封闭范围

因此，在这种情况下，您需要做的一切：

var img = document.getElementById('input');
img.addEventListener( 'change' , function () {
    var input = this;
    console.log(input);
});

---

这是因为箭头函数不创建新的作用域。将第二个示例中的箭头函数更改为

img.addEventListener('change', function () {
    var input = this;
    console.log(input);
});

它的工作原理与您的第一个示例完全相同

---

另请参见：

好的！谢谢我完全忘记了这一点，将代码改为在函数中添加一个事件参数，并将event.target存储在我的输入变量中，我发现该变量返回目标输入。谢谢你帮我把事情弄清楚！或者，您可以保留arrow函数并访问从传递给处理函数的参数引发事件的元素<不需要代码>输入。您已经有了要使用的

img

变量。